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"> <!-- 内容 --> </div> |
建议尽可能在使用 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
https://cn.vuejs.org/v2/guide/list.html