我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中
items 是源数据数组，而 item 则是被迭代的数组元素的别名。
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：
<div v-for="(item,index) in items" :key="item.id">
<!-- 内容 -->
</div>
（1）遍历数组
在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。
<ul id="example-2">
<li v-for="(item, index) in items" :key="index">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果：
也可用 of 替代 in 作为分隔符。
<div v-for="(item, index) of items" :key="index"></div>
（2）遍历对象
<div v-for="(value, name, index) in object" :key="index">
{{ index }}. {{ name }}: {{ value }}
</div>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
结果：
在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。
（3）遍历整数
理论上来说，整数不是一个可遍历的单元，但是vue相当于给我们提供了一个方便方式来减少重复代码。
<div id="app">
<ul>
<li v-for="count in val ">{{count}}</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
num: 5
}
})
结果 1、2、3、4、5（这里count循环只会从1开始）
为什么是从1开始呢，源码如下
if (Array.isArray(val) || typeof val === 'string') {
ret = new Array(val.length);
for (i = 0, l = val.length; i < l; i++) {
ret[i] = render(val[i], i);
}
} else if (typeof val === 'number') {
ret = new Array(val);
for (i = 0; i < val; i++) {
ret[i] = render(i + 1, i);
}
} else if (isObject(val)) {
keys = Object.keys(val);
ret = new Array(keys.length);
for (i = 0, l = keys.length; i < l; i++) {
key = keys[i];
ret[i] = render(val[key], key, i);
}
}
可以看到，val>i,而i=0，所以就是从1开始了。想要它从0开始计算只需要改为{{count-1}}：
<div id="app">
<ul>
<li v-for="count in val ">{{count-1}}</li>
</ul>
</div>
new Vue({
el: '#app',
data: {
num: 5
}
})
