关于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>

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理