标签：指令 多个 dom nbsp res 属性 循环 对象 data
由于是多个事项，那么这个数据模型是一个数组；为了显示这些代办事项我们首先添加一些样本数据
<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>
<ul> <li v-for="todo in todos"> <label>{{todo.name}}</label> </li> </ul>
如果我们要输出待办事项的序号，可以使用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不单单可以循环渲染数组，还可以渲染对象属性，例如：
<ul> <li v-for="value in object"> <label>{{value}}</label> </li> </ul> data(){ return{ object{ first_name: "Ray", last_name: "Liang" } } }
输出：
“Ray"
"Liang"
标签：指令 多个 dom nbsp res 属性 循环 对象 data
原文地址：https://www.cnblogs.com/yanl55555/p/12096945.html
