vue 觀察數(shù)組的變異方法 更新視圖

push()

pop()

shift()

unshift()

splice(i,n,arr)

sort(xx)

reverse()

ex: app.book.push({

name:‘css‘,

author:‘lee‘

})

有些方法不會(huì)改變數(shù)組

filter()

concat()

slice()

返回新數(shù)組? 需要用 新返回的數(shù)組 更新原數(shù)組

app.books= app.books.filter(functiion(item){

return item.name.match(/javascript/)

})

vue 不能檢測(cè)到數(shù)組變化 不能觸發(fā)視圖更新：

1 通過直接搜影 更改變量

ex app.book[3] = ‘xxxx‘;

2 修改數(shù)組的長(zhǎng)度

app.books.length =1;

解決這個(gè)問題 倆種方法

1 vue 內(nèi)置的set方法 類 splice

Vue.set(app.books,3,{

name:‘qqq‘,

author:‘qjb‘

})

2 webpack 沒有引入Vue 用 $set

this.$set(app.books,3,{

name:‘css‘,

author:‘qjb‘

})

this指向組建的實(shí)例 既 app ，可以使用app.$set()

3? 使用 splice

appp.book.splice(3,1,{

name:‘css‘,

author:‘qjb‘

})

splice(索引，刪除的數(shù)量(0不刪除)，插入的變量arr1,arr2,arr3)

更改索引

app.books.splice(1);

、、、、過濾與排序。。。。。。。

不改變?cè)瓟?shù)組

computed:{

filterBooks:function(){

return this.books.filter(function(book){

return book.name.match(/javascript/)

})

}

}

sort()來排序

、、、、、、、、、、、、、、、、、、、、、、

總結(jié)

以上是生活随笔為你收集整理的vue数组变化视图_vue数组操作不更新视图问题(示例代码)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。