vue的this.$set的作用

用于手动让vue实现动态绑定数据

如果我们在创建实例以后,再在实例上绑定新属性,vue是无法进行双向绑定的。
比如:

 

var data = {
    name: "zeller",
    age: '20',
}   
var key = 'content';
var vm = new Vue({
    el:'#app',
    data: data
});
data.sex = 'male';

sex属于data的一个新属性,而vue的原理是,在创建实例的时候,遍历data里的值,监听'getter'和'setter'方法,一旦这些值更新了,就去触发对应的视图更新。

而sex并不是vue实例化的时候拥有的属性,所以我们新增这个属性,vue并没有对他的setter和getter方法进行监听,因此无法实现双向绑定

此时如果使用this.$set的话,vue就会对它进行双向绑定了。

 

methods:{
    setSex: function(){
        this.$set('sex','male')
    }
}



作者:Aleph_Zheng
链接:https://www.jianshu.com/p/e58f099c9133
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

JEECG官方博客 CSDN认证博客专家 机器学习 深度学习 开源达人
专注技术开源,打造开源的JAVA快速开发平台—JEECG(获得CSDN专家访谈,ITEYE访谈、连续五年中国最火TOP5、十大优秀开源项目等)、免费微信管家平台—JeeWx 捷微(获得2014年微信开发商大会第一名)
已标记关键词 清除标记
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值