Object.defineProperty()简易双向绑定

 var obj={_num:0};
  Object.defineProperty(obj,"num",{
      get(){
          console.log("get 执行")
          return obj._num
      },
      set(v){
        console.log("set 执行")
          obj._num=v;
          var elemd=document.querySelectorAll("*[v-text='num']")
          //获取所有属性有v-text='num'的元素
          for(var i=0;i<elemd.length;i++){
              elemd[i].innerHTML=v;
          }
          var els=document.querySelectorAll("input[v-model='num']")
          //获取所有属性为v-model值为num的表单
          for(var i=0;i<els.length;i++){
              els[i].value=v;
              //当设置num时候 设置表的值为v
              els[i].oninput=function(e){
                  //当表发生变化时
                  console.log("change");
                  obj.num=e.currentTarget.value
                  //设置num值为当前事件对象的值
                //   e.currentTarget.value 当前事件所对应的对象
              }
          }
      }
      //定义obj的num属性 当num值被设置时执行set方法,获取时执行get方法
  })
  obj.num=obj._num;

猜你喜欢

转载自blog.csdn.net/hhhhhhhhhtr/article/details/106787056
今日推荐