用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內容非常簡單，或者是刻意依賴默認行為以獲取性能上提升。

數組更新檢測

(1)變異方法

Vue包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下：

push()pop()shift()unshift()splice()sort()reverse()

(2)替換數組

變異方法，是會改變被這些方法調用的原始數組。相比之下也有非變異方法：