1. 程式人生 > >js實現數據的雙向綁定

js實現數據的雙向綁定

prope 修改 描述 pre tlist bsp col set new

今天用原生js來實現一個數據的雙向綁定

知識點:object.defineProperty()

  三個參數:

    第一個:要定義屬性的對象,

    第二個:要定義或者修改的屬性的名稱

    第三個:將被定義或者修改的屬性的描述

<input type="text" id="inp"/>
<p id="showText"></p>
<script>
  var obj = {};
  Object.defineProperty(obj,"newProp",{
    get:function(){
      return obj;
    },
    set:function(newVal){
      document.getElementById("inp").value = newVal;
      document.getElementById("showText").innerHTML = newVal;
    }
  })
  document.addEventListener("keyup",function(e){
    obj.newProp = e.target.value;
  })
</script>

js實現數據的雙向綁定