我們可以用 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
}
})