vue暗含玄机的v-for指令

Posted 2021-03-20 yanl55555

 

由于是多个事项，那么这个数据模型是一个数组；为了显示这些代办事项我们首先添加一些样本数据 

<script>
  export default {
    data() {
      return {
　　　　 title： ‘vue-todos‘,
        tableData: [{
          date: ‘2016-05-02‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1518 弄‘
        }, {
          date: ‘2016-05-04‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1517 弄‘
        }, {
          date: ‘2016-05-01‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1519 弄‘
        }, {
          date: ‘2016-05-03‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1516 弄‘
        }]
      }
    }
  }
</script>

v-for使用方法一：

<ul>
     <li v-for="todo in todos">
            <label>{{todo.name}}</label>
     </li>
     
</ul>    

v-for使用方法二：

如果我们要输出待办事项的序号，可以使用v-for中隐藏的一个index值来实现

<ul>
     <li v-for="(todo,index) in todos"
    :id="index">
            <label>{{index+1}}   {{todo.name}}</label>
     </li>
     
</ul>  

只要用括号括住引用参数，最后一个值就是循环的索引

另外这里使用了属性绑定语法，

:id="index"意思是将index的值输出到DOM的属性id上

v-for使用方法三：

v-for不单单可以循环渲染数组，还可以渲染对象属性，例如：

<ul>
     <li v-for="value in object">
            <label>{{value}}</label>
     </li>
     
</ul>  

data(){
        return{
            object{
                first_name: "Ray",
                last_name: "Liang"
        }
    }
}    

 

输出：

　　“Ray"

　　"Liang"