vue -- 数组变化检测

vue有时候在改变了数组的值的时候,视图并不会更新,这时候就需要调用vue变化数组的方法来实现

一、变化数组方法

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

二、替换一个数组

filter()
concat()
slice()

为什么vue数组改变了,视图不变?
Tips
由于 JavaScript 的限制,Vue 无法检测到以下数组变动
1、当你使用索引直接设置一项时,例如 vm.items[indexOfItem] = newValue
2、当你修改数组长度时,例如 vm.items.length = newLength

data: {
    arr: [
        {name: '李狗蛋'},
        {name: '李翠花'}
      ]
}
app.arr[0] = {name: '王二丫'}

展示结果:
js 现在我们再来改变一下:js
Vue.set(app.arr,0,{name: '王二丫'})

展示结果:
李狗蛋
李翠花

发现虽然修改了arr第一项的内容,但是视图并没有像我们所预想的那样跟着改变

如何解决单独改变数组某项值而视图不刷新问题?

1、Vue.set()

Vue.set(目标数组,改变项的索引,新值)

王二丫
李翠花

或者利用数组方法splice的替换功能

app.arr.splice(0,1,{name: '丫蛋'})

展示结果:

丫蛋
李翠花
如何解决设置数组长度而视图不刷新问题?

2、splice()

app.arr.splice(1)

展示结果 :

李狗蛋

splice()会删除指定索引及以后的数组项,返回的是为指定索引之前的数组项组成的新数组

转载于:https://www.cnblogs.com/zjh-study/p/10655676.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值