v-if 和 v-for 的使用
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" ]
猪猪侠要努力呀!