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"
  ]

   

 

转载于:https://www.cnblogs.com/mlllily/p/10791784.html