用v-for把一个数组对应为一个组件元素
我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的语法：
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>var vm = new Vue({
el: '#el',
data: {
items: [
{message: 'foo'},
{message: 'boar'}
] }
})
在v-for块中，我们拥有对父作用域属性的完全访问权限。v-for还支持一个可选的第二个参数为当前项的索引。
<ul>
<li v-for="(item, index) in items">
{{ item.message }} {{ index }}
</li>
</ul>var vm = new Vue({
el: '#el',
data: {
items: [
{message: 'foo'},
{message: 'bar'}
] }
})
也可以用of替代in作为分隔符，因为它是最接近JavaScript迭代器的语法：
<div v-for="item of items"></div>一个对象的v-for
也可以使用v-for通过对一个对象的属性迭代。
new Vue({
el: '#el',
data: {
object: {
firstName: 'h',
lastName: 'z',
age: 26
}
}
})<ul id="v-for-object" class="demo">
<li v-for="value on object">
{{ value }}
/li>
</ul>
也可以提供第二个参数为名：
<div v-for="(value, key) in object">
{{ key }} : {{ value }}
</div>
第三个参数为索引：
<div v-for="(value, key, index) in object">
{{index}}. {{key}}: {{value}}
</div>Key
当Vue使用v-for正在更新已渲染过的元素列表时，它默认就地复用。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的顺序，而是简单的复用此处每个元素，并且 确保它在特定索引下显示已被渲染过的每个元素。
这个默认的模式是高效的，但只适用于不依赖子组件状态或零时DOM状态的列表渲染输出。
为了给Vue一个提示，以便追踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性。理想的key值是每项都有唯一id。它的工作方式类似于一个属性，所以你需要用v-bind来绑定动态值：
<div v-for="item in items" :key="item.id">
</div>建议尽可能在使用v-for时提供key，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上提升。
