先引入一個例子：

HTML

<ul id="example-2">

<li v-for="(item, index) in items">

{{ parentMessage }} - {{ index }} - {{ item.message }}

</li>

</ul>

JS

var example2 = new Vue({

el: '#example-2',

data: {

parentMessage: 'Parent',

items: [

{ message: 'Foo' },

{ message: 'Bar' }

]

}

})

結果：

這裡為什麼要寫這個v-for呢？是因為它涉及到了JavaScript的迭代器，就是陣列的迭代。

陣列索引僅是可列舉的整數名，其他方面和別的普通物件屬性沒有什麼區別。for...in 並不能夠保證返回的是按一定順序的索引，但是它會返回所有可列舉屬性，包括非整數名稱的和繼承的。

因為迭代的順序是依賴於執行環境的，所以陣列遍歷不一定按次序訪問元素。 因此當迭代那些訪問次序重要的 arrays 時用整數索引去進行 for 迴圈 (或者使用 Array.prototype.forEach() 或 for...of 迴圈) 。

如下圖的測試：