用 v-for 把一個(gè)數(shù)組對(duì)應(yīng)為一組元素
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
在 v-for 塊中，我們擁有對(duì)父作用域?qū)傩缘耐耆L問(wèn)權(quán)限。v-for 還支持一個(gè)可選的第二個(gè)參數(shù)為當(dāng)前項(xiàng)的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
也可以用 of 替代 in 作為分隔符，因?yàn)樗亲罱咏?JavaScript 迭代器的語(yǔ)法
<div v-for="item of items"></div>
一個(gè)對(duì)象的 v-for
可以用 v-for 通過(guò)一個(gè)對(duì)象的屬性來(lái)迭代
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
也可以提供第二個(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
建議盡可能在使用 v-for 時(shí)提供 key，除非遍歷輸出的 DOM 內(nèi)容非常簡(jiǎn)單，或者是刻意依賴(lài)默認(rèn)行為以獲取性能上的提升。
數(shù)組更新檢測(cè)
變異方法
- push() 后面添加
- pop() 后面刪除
- shift() 前面刪除
- unshift() 前面添加
- splice() 向數(shù)組添加刪除元素
- sort() 順序排序
- reverse() 倒序排序
對(duì)象更改檢測(cè)注意事項(xiàng)
例如：filter(), concat() 和 slice()
總是返回一個(gè)新數(shù)組
Vue 不能檢測(cè)對(duì)象屬性的添加或刪除：
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 現(xiàn)在是響應(yīng)式的
vm.b = 2
// `vm.b` 不是響應(yīng)式的
對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不能動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套對(duì)象添加響應(yīng)式屬性
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
添加一個(gè)新的 age 屬性到嵌套的 userProfile 對(duì)象
Vue.set(vm.userProfile, 'age', 27)
還可以使用 vm.$set 實(shí)例方法，它只是全局 Vue.set 的別名
vm.$set(vm.userProfile, 'age', 27)
需要為已有對(duì)象賦予多個(gè)新屬性
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
顯示過(guò)濾/排序結(jié)果
想要顯示一個(gè)數(shù)組的過(guò)濾或排序副本，而不實(shí)際改變或重置原始數(shù)據(jù)
<li v-for="n in evenNumbers">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
在計(jì)算屬性不適用的情況下 (例如，在嵌套 v-for 循環(huán)中) 你可以使用一個(gè) method 方法
<li v-for="n in even(numbers)">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
一段取值范圍的 v-for
v-for 也可以取整數(shù)
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
v-for on a <template>
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
v-for with v-if
當(dāng)它們處于同一節(jié)點(diǎn)，v-for 的優(yōu)先級(jí)比 v-if 更高，這意味著 v-if 將分別重復(fù)運(yùn)行于每個(gè) v-for 循環(huán)中
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
如果你的目的是有條件地跳過(guò)循環(huán)的執(zhí)行，那么可以將 v-if 置于外層元素 (或 <template>)上
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
一個(gè)組件的 v-for
2.2.0+ 的版本里，當(dāng)在組件中使用 v-for 時(shí)，key 現(xiàn)在是必須的。
