乐趣区

关于vue3:用原生写一个简易双向绑定的例子

var obj = {};
Object.defineProperty(obj,'hello',{get:function(){
    // 咱们在这里拦挡到了数据
    console.log("get 办法被调用");
  },
  set:function(newValue){
    // 扭转数据的值,拦挡下来额
    console.log("set 办法被调用");
    document.getElementById('test').value = newValue;
    document.getElementById('test1').innerHTML = newValue;
  }
});
//obj.hello;
//obj.hello = '123';
document.getElementById('test').addEventListener('input',function(e){obj.hello = e.target.value;// 触发它的 set 办法})

html

<div id="mvvm">
     <input v-model="text" id="test"></input>
      <div id="test1"></div>
  </div>
退出移动版