1：用 v-for 把一個數組對應爲一組元素
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>
在 v-for 塊中，咱們能夠訪問全部父做用域的屬性。v-for 還支持一個可選的第二個參數，即當前項的索引。數組
<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>
你也能夠用 of 替代 in 做爲分隔符，由於它更接近 JavaScript 迭代器的語法：
瀏覽器
<div v-for="item of items"></div>
2：在 v-for 裏使用對象，注:在遍歷對象時，會按 Object.keys() 的結果遍歷，可是不能保證它的結果在不一樣的 JavaScript 引擎下都一致。
遍歷一個對象的屬性ide
<ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul>
new Vue({ el: '#v-for-object',
data: { object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10' }
}
})
你也能夠提供第二個的參數爲 property 名稱 (也就是鍵名)：性能
<div v-for="(value, name) in object"> {{ name }}: {{ value }} </div>
還能夠用第三個參數做爲索引：this
<div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div>
3:維護狀態
當 Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用「就地更新」的策略。spa
若是數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是就地更新每一個元素，而且確保它們在每一個索引位置正確渲染。prototype
這個相似 Vue 1.x 的 track-by="$index"。code
這個默認的模式是高效的，可是隻適用於不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。component
須要使用keyorm
<div v-for="item in items" v-bind:key="item.id"> <!-- 內容 --> </div>
建議儘量在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內容很是簡單，或者是刻意依賴默認行爲以獲取性能上的提高。
由於它是 Vue 識別節點的一個通用機制，key 並不只與 v-for 特別關聯。後面咱們將在指南中看到，它還具備其它用途。
不要使用對象或數組之類的非基本類型值做爲 v-for 的 key。請用字符串或數值類型的值。
4:數組更新檢測
a:變異方法會觸發視圖更新:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
b:替換數組，filter,concat,slice,新數組替換舊數組,你可能認爲這將致使 Vue 丟棄現有 DOM 並從新渲染整個列表。
幸運的是，事實並不是如此。Vue 爲了使得 DOM 元素獲得最大範圍的重用而實現了一些智能的啓發式方法，因此用一個含有相同元素的數組去替換原來的數組是很是高效的操做。
c:不會變更的狀況:
- 當你利用索引直接設置一個數組項時，例如：
vm.items[indexOfItem] = newValue - 當你修改數組的長度時，例如：
vm.items.length = newLength
變通方法
// Vue.set Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
vm.$set(vm.items, indexOfItem, newValue)
vm.items.splice(newLength)
5:對象變動檢測注意事項
Vue 不能檢測對象屬性的添加或刪除:vm,b=xxx,不識別的
能夠用:Vue.set(object, propertyName, value) 方法向嵌套對象添加響應式屬性
你還可使用 vm.$set 實例方法，它只是全局 Vue.set 的別名
vm.$set(vm.userProfile, 'age', 27)
有時你可能須要爲已有對象賦值多個新屬性
var vm = new Vue({ data: { a: 1 } }) // `vm.a` 如今是響應式的 vm.b = 2 // `vm.b` 不是響應式的
顯示過濾/排序後的結果-用計算屬性
有時，咱們想要顯示一個數組通過過濾或排序後的版本，而不實際改變或重置原始數據。在這種狀況下，能夠建立一個計算屬性，來返回過濾或排序後的數組
在計算屬性不適用狀況下:v-for 用方法
<li v-for="n in even(numbers)">{{ n }}</li>
在 v-for 裏使用值範圍:能夠對 整數
<div> <span v-for="n in 10">{{ n }} </span> </div>
在 <template> 上使用 v-for:與v-if相似
<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template> </ul>
v-for 與 v-if 一同使用(避免):v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重複運行於每一個 v-for 循環中
在組件上使用 v-for
在自定義組件上，你能夠像在任何普通元素上同樣使用 v-for 。
<my-component v-for="item in items" :key="item.id"></my-component>
2.2.0+ 的版本里，當在組件上使用 v-for 時，key 如今是必須的。
<my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index" v-bind:key="item.id" ></my-component>
爲了把迭代數據傳遞到組件裏，咱們要使用 prop
<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>
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 = '' } } })
注意這裏的 is="todo-item" 屬性。這種作法在使用 DOM 模板時是十分必要的，由於在 <ul> 元素內只有 <li> 元素會被看做有效內容。這樣作實現的效果與 <todo-item> 相同，可是能夠避開一些潛在的瀏覽器解析錯誤