首页 > 代码库 > 循环语句
循环语句
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 是数组元素迭代的别名。
上面这句话翻译一下：
- items是data对象中的一个对象数组
- items数组中每个成员对象的key都必须相同
（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>
循环语句
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。