Vue中的set方法

2019年3月2日14:48:27 发表评论 阅读(121)

在修改数组或对象的值时,除了上篇文章《Vue中的列表渲染》讲到的方法其实还有一种,那就是vue提供给我们的set方法,通过set方法我们可以实现数据发生变化页面随之改变的效果。

对象的set方法

回顾一下,在上篇文章中有讲到一种方法

  1. 改变引用

本文讲到的是第二种 -- set方法,用法:

Vue中的set方法

通过vue的set方法,我们向对象中增加值,数据发生了改变页面随之发生了改变,我们还可以打印一下数据,来看一下是否发生了改变:

Vue中的set方法

可以清楚的看到address已经被添加到了数据之上。

vue的set方法不仅可以这样用,还可以换种用法,因为set不仅是vue的一个全局方法,同时也是vue的实例方法,实例方法怎么使用呢?

 

Vue中的set方法

我们可以发现,通过vue实例的$set方法可以实现一样的效果。

数组的set方法

回顾一下,在上篇文章中有讲到两种方法

  1. 调用数组的变异方法(pushpopshiftunshiftsplicesortreverse
  2. 改变引用

本文讲到的是第三种 -- set方法,用法:

Vue中的set方法

通过图片我们可以看到,用vue的set方法改变数组下标是4的值为5,并且页面也发生了改变;使用vue实例的$set方法改变数组下标是5的值为6,页面也随之发生了改变。最后我们打印实例的数据,可以看到数据已经发生了改变。

总结

在vue中希望实现改变数组内的数据,页面也随之发生改变的方法一共有三种:

  • 改变引用
  • 调用变异方法
  • set方法

希望改变对象内的数据,页面也随之改变的方法一共有两种:

  • 改变引用
  • set方法
weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
  • A+
所属分类:JS
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛