對象更改檢測注意事項
對于已經(jīng)創(chuàng)建的實例,Vue 不能動態(tài)添加根級別的響應式屬性刨肃。但是古拴,可以使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。
Vue.set(vm.userProfile, 'age', 27)
你還可以使用 vm.$set 實例方法真友,它只是全局 Vue.set 的別名:
this.$set(this.userProfile, 'age', 27)
數(shù)組更新檢測
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你打開控制臺黄痪,然后用前面例子的 ps 數(shù)組調(diào)用變異方法:
例:vm.ps.push({ message: 'Baz' }) 。
顯示過濾/排序結(jié)果
有時盔然,我們想要顯示一個數(shù)組的過濾或排序副本桅打,而不實際改變或重置原始數(shù)據(jù)。在這種情況下愈案,可以創(chuàng)建返回過濾或排序數(shù)組的計算屬性油额。
例如:
<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
})
}
}
在計算屬性不適用的情況下 (例如,在嵌套 v-for
循環(huán)中) 你可以使用一個 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
})
}
}