列表渲染 · VueJS官方離線文檔(搬運版)

## 用 `v-for` 把一個數組對應為一組元素我們用 `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(document.querySelector('#example-1')) } } }) </script> {% endraw %} 在 `v-for` 塊中，我們擁有對父作用域屬性的完全訪問權限。`v-for` 還支持一個可選的第二個參數為當前項的索引。 ``` 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' } ] } }) ``` 結果： {% raw%} <ul id="example-2" class="demo"> <li v-for="(item, index) 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(document.querySelector('#example-2')) } } }) </script> {% endraw %} 你也可以用 `of` 替代 `in` 作為分隔符，因為它是最接近 JavaScript 迭代器的語法： ``` html <div v-for="item of items"></div> ``` ## 一個對象的 `v-for` 你也可以用 `v-for` 通過一個對象的屬性來迭代。 ``` html <ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul> ``` ``` js new Vue({ el: '#v-for-object', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) ``` 結果： {% raw %} <ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul> <script> new Vue({ el: '#v-for-object', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) </script> {% endraw %} 你也可以提供第二個的參數為鍵名： ``` html <div v-for="(value, key) in object"> {{ key }}: {{ value }} </div> ``` {% raw %} <div id="v-for-object-value-key" class="demo"> <div v-for="(value, key) in object"> {{ key }}: {{ value }} </div> </div> <script> new Vue({ el: '#v-for-object-value-key', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) </script> {% endraw %} 第三個參數為索引： ``` html <div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div> ``` {% raw %} <div id="v-for-object-value-key-index" class="demo"> <div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div> </div> <script> new Vue({ el: '#v-for-object-value-key-index', data: { object: { firstName: 'John', lastName: 'Doe', age: 30 } } }) </script> {% endraw %} <p class="tip">在遍歷對象時，是按 `Object.keys()` 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下是一致的。</p> ## `key` 當 Vue.js 用 `v-for` 正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 Vue 1.x 的 `track-by="$index"` 。這個默認的模式是高效的，但是只適用于**不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出**。為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 `key` 屬性。理想的 `key` 值是每項都有的唯一 id。這個特殊的屬性相當于 Vue 1.x 的 `track-by` ，但它的工作方式類似于一個屬性，所以你需要用 `v-bind` 來綁定動態值 (在這里使用簡寫)： ``` html <div v-for="item in items" :key="item.id">  </div> ``` 建議盡可能在使用 `v-for` 時提供 `key`，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。因為它是 Vue 識別節點的一個通用機制，`key` 并不與 `v-for` 特別關聯，key 還具有其他用途，我們將在后面的指南中看到其他用途。 ## 數組更新檢測 ### 變異方法 Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下： - `push()` - `pop()` - `shift()` - `unshift()` - `splice()` - `sort()` - `reverse()` 你打開控制臺，然后用前面例子的 `items` 數組調用變異方法：`example1.items.push({ message: 'Baz' })` 。 ### 替換數組變異方法 (mutation method)，顧名思義，會改變被這些方法調用的原始數組。相比之下，也有非變異 (non-mutating method) 方法，例如：`filter()`, `concat()` 和 `slice()` 。這些不會改變原始數組，但**總是返回一個新數組**。當使用非變異方法時，可以用新數組替換舊數組： ``` js example1.items = example1.items.filter(function (item) { return item.message.match(/Foo/) }) ``` 你可能認為這將導致 Vue 丟棄現有 DOM 并重新渲染整個列表。幸運的是，事實并非如此。Vue 為了使得 DOM 元素得到最大范圍的重用而實現了一些智能的、啟發式的方法，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。 ### 注意事項由于 JavaScript 的限制，Vue 不能檢測以下變動的數組： 1. 當你利用索引直接設置一個項時，例如：`vm.items[indexOfItem] = newValue` 2. 當你修改數組的長度時，例如：`vm.items.length = newLength` 舉個例子： ``` js var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是響應性的 vm.items.length = 2 // 不是響應性的 ``` 為了解決第一類問題，以下兩種方式都可以實現和 `vm.items[indexOfItem] = newValue` 相同的效果，同時也將觸發狀態更新： ``` js // Vue.set Vue.set(vm.items, indexOfItem, newValue) ``` ``` js // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue) ``` 你也可以使用 [`vm.$set`](https://vuejs.org/v2/api/#vm-set) 實例方法，該方法是全局方法 `Vue.set` 的一個別名： ``` js vm.$set(vm.items, indexOfItem, newValue) ``` 為了解決第二類問題，你可以使用 `splice`： ``` js vm.items.splice(newLength) ``` ## 對象更改檢測注意事項還是由于 JavaScript 的限制，**Vue 不能檢測對象屬性的添加或刪除**： ``` js var vm = new Vue({ data: { a: 1 } }) // `vm.a` 現在是響應式的 vm.b = 2 // `vm.b` 不是響應式的 ``` 對于已經創建的實例，Vue 不能動態添加根級別的響應式屬性。但是，可以使用 `Vue.set(object, key, value)` 方法向嵌套對象添加響應式屬性。例如，對于： ``` js var vm = new Vue({ data: { userProfile: { name: 'Anika' } } }) ``` 你可以添加一個新的 `age` 屬性到嵌套的 `userProfile` 對象： ``` js Vue.set(vm.userProfile, 'age', 27) ``` 你還可以使用 `vm.$set` 實例方法，它只是全局 `Vue.set` 的別名： ``` js vm.$set(vm.userProfile, 'age', 27) ``` 有時你可能需要為已有對象賦予多個新屬性，比如使用 `Object.assign()` 或 `_.extend()`。在這種情況下，你應該用兩個對象的屬性創建一個新的對象。所以，如果你想添加新的響應式屬性，不要像這樣： ``` js Object.assign(vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) ``` 你應該這樣做： ``` js vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' }) ``` ## 顯示過濾/排序結果有時，我們想要顯示一個數組的過濾或排序副本，而不實際改變或重置原始數據。在這種情況下，可以創建返回過濾或排序數組的計算屬性。例如： ``` html <li v-for="n in evenNumbers">{{ n }}</li> ``` ``` js data: { numbers: [ 1, 2, 3, 4, 5 ] }, computed: { evenNumbers: function () { return this.numbers.filter(function (number) { return number % 2 === 0 }) } } ``` 在計算屬性不適用的情況下 (例如，在嵌套 `v-for` 循環中) 你可以使用一個 method 方法： ``` html <li v-for="n in even(numbers)">{{ n }}</li> ``` ``` js data: { numbers: [ 1, 2, 3, 4, 5 ] }, methods: { even: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }) } } ``` ## 一段取值范圍的 `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 %} ## `v-for` on a `<template>` 類似于 `v-if`，你也可以利用帶有 `v-for` 的 `<template>` 渲染多個元素。比如： ``` html <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template> </ul> ``` ## `v-for` with `v-if` 當它們處于同一節點，`v-for` 的優先級比 `v-if` 更高，這意味著 `v-if` 將分別重復運行于每個 `v-for` 循環中。當你想為僅有的*一些*項渲染節點時，這種優先級的機制會十分有用，如下： ``` html <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li> ``` 上面的代碼只傳遞了未完成的 todos。而如果你的目的是有條件地跳過循環的執行，那么可以將 `v-if` 置于外層元素 (或 [`<template>`](conditional.html#在-lt-template-gt-中配合-v-if-條件渲染一整組))上。如： ``` html <ul v-if="todos.length"> <li v-for="todo in todos"> {{ todo }} </li> </ul> <p v-else>No todos left!</p> ``` ## 一個組件的 `v-for` > 了解組件相關知識，查看 [組件](components.html)。完全可以先跳過它，以后再回來查看。在自定義組件里，你可以像任何普通元素一樣用 `v-for` 。 ``` html <my-component v-for="item in items" :key="item.id"></my-component> ``` > 2.2.0+ 的版本里，當在組件中使用 `v-for` 時，`key` 現在是必須的。然而，任何數據都不會被自動傳遞到組件里，因為組件有自己獨立的作用域。為了把迭代數據傳遞到組件里，我們要用 `props` ： ``` html <my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index" v-bind:key="item.id" ></my-component> ``` 不自動將 `item` 注入到組件里的原因是，這會使得組件與 `v-for` 的運作緊密耦合。明確組件數據的來源能夠使組件在其他場合重復使用。下面是一個簡單的 todo list 的完整例子： ``` html <div id="todo-list-example"> <form v-on:submit.prevent="addNewTodo"> <label for="new-todo">Add a todo</label> <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat" > <button>Add</button> </form> <ul> <li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)" ></li> </ul> </div> ``` <p class="tip">注意這里的 `is="todo-item"` 屬性。這種做法在使用 DOM 模板時是十分必要的，因為在 `<ul>` 元素內只有 `<li>` 元素會被看作有效內容。這樣做實現的效果與 `<todo-item>` 相同，但是可以避開一些潛在的瀏覽器解析錯誤。查看 [DOM 模板解析說明](components.html#解析-DOM-模板時的注意事項) 來了解更多信息。</p> ``` js Vue.component('todo-item', { template: '\ <li>\ {{ title }}\ <button v-on:click="$emit(\'remove\')">Remove</button>\ </li>\ ', props: ['title'] }) new Vue({ el: '#todo-list-example', data: { newTodoText: '', todos: [ { id: 1, title: 'Do the dishes', }, { id: 2, title: 'Take out the trash', }, { id: 3, title: 'Mow the lawn' } ], nextTodoId: 4 }, methods: { addNewTodo: function () { this.todos.push({ id: this.nextTodoId++, title: this.newTodoText }) this.newTodoText = '' } } }) ``` {% raw %} <div id="todo-list-example" class="demo"> <form v-on:submit.prevent="addNewTodo"> <label for="new-todo">Add a todo</label> <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat" > <button>Add</button> </form> <ul> <li is="todo-item" v-for="(todo, index) in todos" v-bind:key="todo.id" v-bind:title="todo.title" v-on:remove="todos.splice(index, 1)" ></li> </ul> </div> <script> Vue.component('todo-item', { template: '\ <li>\ {{ title }}\ <button v-on:click="$emit(\'remove\')">Remove</button>\ </li>\ ', props: ['title'] }) new Vue({ el: '#todo-list-example', data: { newTodoText: '', todos: [ { id: 1, title: 'Do the dishes', }, { id: 2, title: 'Take out the trash', }, { id: 3, title: 'Mow the lawn' } ], nextTodoId: 4 }, methods: { addNewTodo: function () { this.todos.push({ id: this.nextTodoId++, title: this.newTodoText }) this.newTodoText = '' } } }) </script> {% endraw %}