VUE指令-列表渲染v-for
v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
v-for="item in items"
|
<!-- 格式v-for="item in items" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-for指令示例(默认方式)</div> <hr /> <div> <div style="font-size: 20px;" v-for="item in items"> Name:{{item.name}} </div> </div> </div> |
v-for="(item,index) in items"
|
<!-- 格式v-for="(item,index) in items" --> <!-- 数组只有两个参数(item,index) --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.v-for指令示例(item,index))</div> <hr /> <div> <div style="font-size: 20px;" v-for="(item,key,index) in items"> Name:{{item.name}} + Key:{{key}} + Index:{{index}} </div> </div> </div> |
v-for="(value,key,index) in items" 对象迭代
|
<!-- 格式v-for="(value,key,index) in items" --> <!-- 对象迭代可以有三个参数(value,key,index) --> <div style="height: 200px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-for指令示例(value,key,index)</div> <hr /> <div> <div style="font-size: 20px;" v-for="(value,key,index) in obj"> Name:{{value}} + Key:{{key}} + Index:{{index}} </div> </div> </div> |
也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法。
// TODO
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：
<div v-for="item in items" :key="item.id"> |
建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途，我们将在后面的指南中看到其他用途。
当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用
<!DOCTYPE html> <html style="height: 100%;"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script> <title>HelloDemo</title> </head> <body style="height: 100%;"> <style> </style> <!-- VUE指令v-for列表渲染 v-for指令需要使用item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。 也可以用 of 替代 in 作为分隔符 REF: http://www.runoob.com/vue2/vue-loop.html https://cn.vuejs.org/v2/guide/list.html --> <div id="appVue"> <!-- 格式v-for="(value,key,index) in items" --> <!-- 对象迭代可以有三个参数(value,key,index) --> <div style="height: 200px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-for指令示例(value,key,index)</div> <hr /> <div> <div style="font-size: 20px;" v-for="(value,key,index) in obj"> Name:{{value}} + Key:{{key}} + Index:{{index}} </div> </div> </div> <!-- 格式v-for="(item,index) in items" --> <!-- 数组只有两个参数(item,index) --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.v-for指令示例(item,index))</div> <hr /> <div> <div style="font-size: 20px;" v-for="(item,key,index) in items"> Name:{{item.name}} + Key:{{key}} + Index:{{index}} </div> </div> </div> <!-- 格式v-for="item in items" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-for指令示例(默认方式)</div> <hr /> <div> <div style="font-size: 20px;" v-for="item in items"> Name:{{item.name}} </div> </div> </div> </div> <script> new Vue({ el: "#appVue", data: { items:[{ name:"AAA" },{ name:"BBB" },{ name:"CCC" }], obj:{ prop0:"AAA", prop1:"BBB", prop2:"CCC" } } } ) </script> </body> </html>
REF:
http://www.runoob.com/vue2/vue-loop.html
