列表渲染 · vue

--- title: 列表渲染 type: guide order: 8 --- ## v-for 可以使用 `v-for` 指令基于一個數組渲染一個列表。這個指令使用特殊的語法，形式為 `item in items`，`items` 是數據數組，`item` 是當前數組元素的**別名**： **示例：** ``` html <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> ``` ``` js var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) ``` **結果：** {% raw %} <ul id="example-1" class="demo"> <li v-for="item in items"> {{item.message}} </li> </ul> <script> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] }, watch: { items: function () { smoothScroll.animateScroll(null, '#example-1') } } }) </script> {% endraw %} 在 `v-for` 塊內我們能完全訪問父組件作用域內的屬性，另有一個特殊變量 `$index`，正如你猜到的，它是當前數組元素的索引： ``` html <ul id="example-2"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li> </ul> ``` ``` js var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) ``` **結果：** {% raw%} <ul id="example-2" class="demo"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li> </ul> <script> var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] }, watch: { items: function () { smoothScroll.animateScroll(null, '#example-2') } } }) </script> {% endraw %} 另外，你可以為索引指定一個別名（如果 `v-for` 用于一個對象，則可以為對象的鍵指定一個別名）： ``` html <div v-for="(index, item) in items"> {{ index }} {{ item.message }} </div> ``` ## template v-for 類似于 template `v-if`，也可以將 `v-for` 用在 `<template>` 標簽上，以渲染一個包含多個元素的塊。例如： ``` html <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template> </ul> ``` ## 數組變動檢測 ### 變異方法 Vue.js 包裝了被觀察數組的變異方法，故它們能觸發視圖更新。被包裝的方法有： - `push()` - `pop()` - `shift()` - `unshift()` - `splice()` - `sort()` - `reverse()` 你可以打開瀏覽器的控制臺，用這些方法修改上例的 `items` 數組。例如：`example1.items.push({ message: 'Baz' })`。 ### 替換數組變異方法，如名字所示，修改了原始數組。相比之下，也有非變異方法，如 `filter()`, `concat()` 和 `slice()`，不會修改原始數組而是返回一個新數組。在使用非變異方法時，可以直接用新數組替換舊數組： ``` js example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) }) ``` 可能你覺得這將導致 Vue.js 棄用已有 DOM 并重新渲染整個列表——幸運的是并非如此。 Vue.js 實現了一些啟發算法，以最大化復用 DOM 元素，因而用另一個數組替換數組是一個非常高效的操作。 ### track-by 有時需要用全新對象（例如通過 API 調用創建的對象）替換數組。因為 `v-for` 默認通過數據對象的特征來決定對已有作用域和 DOM 元素的復用程度，這可能導致重新渲染整個列表。但是，如果每個對象都有一個唯一 ID 的屬性，便可以使用 `track-by` 特性給 Vue.js 一個提示，Vue.js 因而能盡可能地復用已有實例。例如，假定數據為： ``` js { items: [ { _uid: '88f869d', ... }, { _uid: '7496c10', ... } ] } ``` 然后可以這樣給出提示： ``` html <div v-for="item in items" track-by="_uid">  </div> ``` 然后在替換數組 `items` 時，如果 Vue.js 遇到一個包含 `_uid: '88f869d'` 的新對象，它知道它可以復用這個已有對象的作用域與 DOM 元素。 ### track-by $index 如果沒有唯一的鍵供追蹤，可以使用 `track-by="$index"`，它強制讓 `v-for` 進入原位更新模式：片斷不會被移動，而是簡單地以對應索引的新值刷新。這種模式也能處理數據數組中重復的值。這讓數據替換非常高效，但是也會付出一定的代價。因為這時 DOM 節點不再映射數組元素順序的改變，不能同步臨時狀態（比如 `<input>` 元素的值）以及組件的私有狀態。因此，如果 `v-for` 塊包含 `<input>` 元素或子組件，要小心使用 `track-by="$index"` ### 問題因為 JavaScript 的限制，Vue.js **不能**檢測到下面數組變化： 1. 直接用索引設置元素，如 `vm.items[0] = {}`； 2. 修改數據的長度，如 `vm.items.length = 0`。為了解決問題 (1)，Vue.js 擴展了觀察數組，為它添加了一個 `$set()` 方法： ``` js // 與 `example1.items[0] = ...` 相同，但是能觸發視圖更新 example1.items.$set(0, { childMsg: 'Changed!'}) ``` 至于問題 (2)，只需用一個空數組替換 `items`。除了 `$set()`， Vue.js 也為觀察數組添加了 `$remove()` 方法，用于從目標數組中查找并刪除元素，在內部它調用 `splice()` 。因此，不必這樣： ``` js var index = this.items.indexOf(item) if (index !== -1) { this.items.splice(index, 1) } ``` 只用這樣： ``` js this.items.$remove(item) ``` ## 對象 v-for 也可以使用 `v-for` 遍歷對象。除了 `$index` 之外，作用域內還可以訪問另外一個特殊變量 `$key`。 ``` html <ul id="repeat-object" class="demo"> <li v-for="value in object"> {{ $key }} : {{ value }} </li> </ul> ``` ``` js new Vue({ el: '#repeat-object', data: { object: { FirstName: 'John', LastName: 'Doe', Age: 30 } } }) ``` **結果：** {% raw %} <ul id="repeat-object" class="demo"> <li v-for="value in object"> {{ $key }} : {{ value }} </li> </ul> <script> new Vue({ el: '#repeat-object', data: { object: { FirstName: 'John', LastName: 'Doe', Age: 30 } } }) </script> {% endraw %} 也可以給對象的鍵提供一個別名： ``` html <div v-for="(key, val) in object"> {{ key }} {{ val }} </div> ``` <p class="tip">在遍歷對象時，是按 `Object.keys()` 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下是一致的。</p> ## 值域 v-for `v-for` 也可以接收一個整數，此時它將重復模板數次。 ``` html <div> <span v-for="n in 10">{{ n }} </span> </div> ``` 結果： {% raw %} <div id="range" class="demo"> <span v-for="n in 10">{{ n }} </span> </div> <script> new Vue({ el: '#range' }) </script> {% endraw %} ## 顯示過濾/排序的結果有時我們想顯示過濾/排序過的數組，同時不實際修改或重置原始數據。有兩個辦法： 1. 創建一個計算屬性，返回過濾/排序過的數組； 2. 使用內置的過濾器 `filterBy` 和 `orderBy`。計算屬性有更好的控制力，也更靈活，因為它是全功能 JavaScript。但是通常過濾器更方便，詳細見 [API](/api/#filterBy)。