标签：对象 数组元素 数据 元素 text .text ems img 并且
v-for渲染项目列表
<div id="app4"> <ol> <li v-for="item in items"> {{item.text}} </li> </ol> </div>
new Vue({ el: "#app4", data: { items: [ {text: "这是第一个li"}, {text: "这是第二个li"}, {text: "这是第三个li"} ] } });
v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
上面这句话翻译一下：
（v-for指令我觉得就是个for...in循环包装了一下）
上面这段代码稍作修改
<div id="app4"> <ol v-for="item in items"> <li> {{item.text}} </li> <li>------------</li> </ol> </div>
js脚本不做变化。结果如下
两次的代码做个对比，很显然可以看出v-for指令的特性：会把拥有v-for属性的元素拷贝items.length次
基于这个推论，我想让分割线只显示一次：
<div id="app4"> <ol> <li v-for="item in items"> {{item.text}} </li> <li>------------</li> </ol> </div>
使用v-for迭代对象
<div id="app4"> <ol> <li v-for="value in object"> {{value}} </li> </ol> </div>
new Vue({ el: "#app4", data: { object: { name: "jiao", age: "25", thing: "coding" } } });
使用v-for迭代整数
<div id="app4"> <ol> <li v-for="value in 100"> {{value}} </li> </ol> </div>
标签：对象 数组元素 数据 元素 text .text ems img 并且
原文地址：http://www.cnblogs.com/jiaoxuanwen/p/6910805.html
