動態

詳情 返回 返回

用原生寫一個簡易雙向綁定的例子 - 動態 詳情

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>

Add a new 評論

Some HTML is okay.