用v-for把一個(gè)數(shù)組對(duì)應(yīng)為一個(gè)組件元素

我們用v-for指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染。v-for指令需要使用item in items形式的語(yǔ)法：

<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塊中，我們擁有對(duì)父作用域?qū)傩缘耐耆L問(wèn)權(quán)限。v-for還支持一個(gè)可選的第二個(gè)參數(shù)為當(dāng)前項(xiàng)的索引。

<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作為分隔符，因?yàn)樗亲罱咏麶avaScript迭代器的語(yǔ)法：

<div v-for="item of items"></div>

一個(gè)對(duì)象的v-for

也可以使用v-for通過(guò)對(duì)一個(gè)對(duì)象的屬性迭代。

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>

也可以提供第二個(gè)參數(shù)為名：

<div v-for="(value, key) in object"> {{ key }} : {{ value }}</div>

第三個(gè)參數(shù)為索引：

<div v-for="(value, key, index) in object"> {{index}}. {{key}}: {{value}}</div>

Key

當(dāng)Vue使用v-for正在更新已渲染過(guò)的元素列表時(shí)，它默認(rèn)就地復(fù)用。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue將不會(huì)移動(dòng)DOM元素來(lái)匹配數(shù)據(jù)項(xiàng)的順序，而是簡(jiǎn)單的復(fù)用此處每個(gè)元素，并且 確保它在特定索引下顯示已被渲染過(guò)的每個(gè)元素。

這個(gè)默認(rèn)的模式是高效的，但只適用于不依賴子組件狀態(tài)或零時(shí)DOM狀態(tài)的列表渲染輸出。

為了給Vue一個(gè)提示，以便追蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一key屬性。理想的key值是每項(xiàng)都有唯一id。它的工作方式類似于一個(gè)屬性，所以你需要用v-bind來(lái)綁定動(dòng)態(tài)值：

<div v-for="item in items" :key="item.id"></div>

建議盡可能在使用v-for時(shí)提供key，除非遍歷輸出的DOM內(nèi)容非常簡(jiǎn)單，或者是刻意依賴默認(rèn)行為以獲取性能上提升。

數(shù)組更新檢測(cè)

(1)變異方法

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

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

(2)替換數(shù)組

變異方法，是會(huì)改變被這些方法調(diào)用的原始數(shù)組。相比之下也有非變異方法：

filter()concat()slice()

這些方法不會(huì)改變?cè)紨?shù)組，但是總會(huì)返回一個(gè)新數(shù)組。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組:

ex.items = ex.items.filter(function(item) { return item.message.match(/Foo/)})

你可能認(rèn)為這將導(dǎo)致Vue丟棄現(xiàn)有DOM并重新渲染整個(gè)列表。Vue為了使得DOM得到最大范圍的重用而實(shí)現(xiàn)了一些智能的、啟發(fā)式的方法，所以用一個(gè)含有相同元素的數(shù)組去替換原來(lái)的數(shù)組是非常高效的操作。

注意事項(xiàng)

由于JavaScript的限制，Vue補(bǔ)