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

     

 

posted on 2019-04-29 17:32  mlllily  阅读(538)  评论(0编辑  收藏  举报