美文网首页
vue的this.$set的作用

vue的this.$set的作用

作者: Aleph_Zheng | 来源:发表于2019-03-04 10:35 被阅读0次

    用于手动让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')
        }
    }
    

    相关文章

      网友评论

          本文标题:vue的this.$set的作用

          本文链接:https://www.haomeiwen.com/subject/cosbuqtx.html