Vue2.0 vue.set

 Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据,我们在构造器外部定义了一个方法,要每次点击按钮给值加1.就需要用到Vue.set。

一、引用构造器外部数据:

什么是外部数据,就是不在Vue构造器里里的data处声明,而是在构造器外部声明,然后在data处引用就可以了。外部数据的加入让程序更加灵活,我们可以在外部获取任何想要的数据形式,然后让data引用。

看一个简单的代码:

二、在外部改变数据的三种方法:

1、用Vue.set改变

2、用Vue对象的方法添加

3、直接操作外部数据

其实这三种方式都可以操作外部的数据,Vue也给我们增加了一种操作外部数据的方法。


三、为什么要有Vue.set的存在?

当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去;

 由于Javascript的限制,Vue不能自动检测以下变动的数组

    *当你利用索引直接设置一个项时,vue不会为我们自动更新。

    *当你修改数组的长度时,vue不会为我们自动更新。


四、使用方法

Vue.set( target, key, value )

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据

value :重新赋的值

如: 

Vue.set(data,'sex', '男')


Tip:Vue.set()在methods中也可以写成this.$set()这也是全局 Vue.set方法的别名)。 

var key = 'content'; //这种主要用于当对象中某个属性值动态生成时处理方式
this.$set('info.'+key, 'what is this?');
或
this.$set('info.content', 'what is this?');



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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值