vue的数组如何存储数据
vue 和 angular 還有有些區別的,
比如,vue中的數組數據改變后,view并沒有發生改變,angular就不會這樣。
所以VUE 在數組擴展方法中提供以了一個新的API arr.$set(index, value);
此方法通過索引index設置數組元素來觸發視圖的跟新。
例如:vue 中的
data {
? ? return {
? ?? ? aa: [{name:jxj,age:25},{name:jxj2,age:252},{name:jxj3,age:253}]? ?}
}
view : 中??<p>my name{{aa[0].name}},my age is {{aa[0].age}}</p>
(1).當我們直接用索引設置元素aa[i].name 和 aa[i].age時,view不會發生改變。
這是vue的一個缺點,為了彌補,vue中提供了$set()方法,vue中還提供了$remove方法,直接刪除數組中的指定元素。this.items.$remove(item)。
那么我們需要使用??aa.$set(0, Object.assign({},aa[0],{name:'jxj2',age:26})),才可以觸發view的變換。
Object.assign()是ES6中對象的新方法,合并對象,將原對象中所以可枚舉的屬性,復制到目標對象中。
這里Object.assign({},aa[0],{name:'jxj2',age:26}) 目標對象是個空對象,將對象中{name:'jxj2',age:26}修改的屬性合并到源對象aa[0]中,最終又合并到空對象中。形成一個新對象
{name:'jxj2',age:26}。
ps:和jq 的extend()原理一樣的啊
總結
以上是生活随笔為你收集整理的vue的数组如何存储数据的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 分享一个 Trait 来易用 Larav
- 下一篇: vue2.0 新手教程(一)