vue 基础知识
1. v-if 的使用: 假如后端传过来的数据,1 表示 “已完成”, 0表示 “未完成”, 那么如何根据 1、0显示出对应的表示信息呢?
<p><span v-if="data.isFinished === 0">未完成</span><span v-if="data.isFinished === 1">已完成</span></p>
2. v-for 的使用:用 v-for 指令将一个数组对应一组元素 https://cn.vuejs.org/v2/guide/list.html
v-for指令需要使用item in items形式的特殊语法,items是源数据数组并且item是数组元素迭代的别名。v-for还支持一个可选的第二个参数为当前项的索引。- 也可以用
v-for通过一个对象的属性来迭代。(像一个字典,对它的 value、key、index进行遍历) - 如果不写 v-bind:key 的话,会报错 : “ Elements in iteration expect to have 'v-bind:key' directives”
- 解决办法有两个: 1. 添加 v-bind:key="index" 2. 在build处关闭eslint检测
//html
<span v-for="(line, index) in data.lines" v-bind:key="index">{{ line }} </span> //data
"lines": [
"line4"
]
vue 基础知识的更多相关文章
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础知识之vue-resource和axios
Vue基础知识之vue-resource和axios 原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...
- Vue基础知识简介
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
- Vue基础知识梳理
1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成.demo 1.2 数据与方法 数据的响应式渲 ...
- Vue基础知识
Vue特性: 双向数据绑定 通过 指令 扩展了 HTML,通过 表达式 绑定数据到 HTML 解耦视图与数据 可复用组件 虚拟DOM -> 对象 M-V-VM 数据驱动视图 Vue声明周期: b ...
- Vue基础知识之组件及组件之间的数据传递(五)
vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...
- Vue基础知识之过滤器(四)
过滤器 1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{msg ...
- Vue基础知识之vue-resource和axios(三)
vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的 ...
- Vue基础知识之常用属性和事件修饰符(二)
Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...
- Vue基础知识之指令和生命周期(一)
优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...
随机推荐
- C3垂直居中均分
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 监督学习——K邻近算法及数字识别实践
1. KNN 算法 K-近邻(k-Nearest Neighbor,KNN)是分类算法,是一个理论上比较成熟的方法,也是最简单的机器学习算法之一.该方法的思路是:如果一个样本在特征空间中的k个最相似( ...
- Spring3.1 对Bean Validation规范的新支持(方法级别验证)
上接Spring提供的BeanPostProcessor的扩展点-1继续学习. 一.Bean Validation框架简介 写道Bean Validation standardizes constra ...
- java技术树+必读书籍
引子 本篇文章用技术树的形式来展示java相关技术栈.所有技术点有博客的都自带链接,没有的后续加上. 必读书籍推荐: 1.java基础: <effective java>-->四星推 ...
- 教你如何使用Java手写一个基于链表的队列
在上一篇博客[教你如何使用Java手写一个基于数组的队列]中已经介绍了队列,以及Java语言中对队列的实现,对队列不是很了解的可以我上一篇文章.那么,现在就直接进入主题吧. 这篇博客主要讲解的是如何使 ...
- Django设置查看原生SQL语句
LOGGING = { 'version': 1, 'disable_existing_loggers': False, 'handlers': { 'console':{ 'level':'DEBU ...
- 将本地文件传输到GitHub
统一概念: 工作区:增删文件和内容 暂存区:键入命令 git add 改动的文件,此次改动就放到了 『暂存区』 本地仓库 :键入命令 git commit ,此次改动就放到了『本地仓库』,每个 com ...
- SpringBoot之旅第三篇-日志
一.前言 日志对于一个系统的重要性不言而喻,日志能帮我们快速定位线上问题,市场上存在非常多的日志框架,比较常见的有 JUL,JCL,Log4j,Log4j2,Logback.SLF4j.jboss-l ...
- 【java线程】的wait、sleep、join、yied
1.概述 使用Thread相对来说比较简单,没有什么成本,但是通常来说,我们使用线程基本就是覆写run方法,然后调用线程对象的start函数启动线程. 对于面试人员来说,这些都不是面试官会问到的问题, ...
- 带着新人看java虚拟机02
上一节是把大概的流程给过了一遍,但是还有很多地方没有说到,后续的慢慢会涉及到,敬请期待! 这次我们说说垃圾收集器,又名gc,顾名思义,就是收集垃圾的容器,那什么是垃圾呢?在我们这里指的就是堆中那些没人 ...