在vue中通过索引修改数组中的数据是否是响应式的

一句话:先抛结论,在vue中通过索引修改数组中的数据页面是不会改变的也就不是响应式
以下是具体的代码案例

var vm = new Vue({
      el: '#app',
      data: {
        // 数组类型的类型
        list: ['apple', 'orange', 'banana', { a: 123 }],
        // 对象类型的数据
        info: {
          name: 'lisi',
          age: 12
        }
      }
    });
vm.list[1] = 'lemon'; // 用索引值改变数组数据不是响应式的 数据改变页面不会改变
vm.list[3].a = 456  // 通过索引修改某一项的对象的内部的属性是可以实现响应的改变的
// 如果想要通过索引值来响应式的改变数组数据可以使用以下两种方法
vue.set(vm.list,2,pear)
vm.$set(vm.list,1,Mac)
// 给对象添加属性 不是响应的:数据改变但是页面没有更新
vm.info.gender='formale' 
vm.info.['grades']=60
// 以上就是不是响应的,但是根据vue.set/vm.$set来实现响应式

一句话总结:通过索引值直接修改数据,页面是不会响应的改变。但是可以实现,给对象添加属性也不是响应的,但是也可以实现

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

疯狂平头哥前端乐园

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值