vue2 中通过Object.defineProperty实现数据双向绑定

206 阅读1分钟

代码如下:

    <input type="text" id="ipt">
    <div id="content">{{obj.hello}}</div>
    <script>
       let obj = {};
       Object.defineProperty(obj,"hello",{
           set(value){
               document.getElementById("content").innerHTML = value;
               document.getElementById("ipt").value = value;
           }
       })
       document.getElementById("ipt").onkeyup = function(e){
           obj.hello = e.target.value;
       }
       obj.hello = ""
    </script>

不用Object.defineProperty实现的情况

<input type="text" id="ipt">
<div id="content"></div>
<script>
   document.getElementById("ipt").onkeyup = function(e){
       document.getElementById("content").innerHTML = e.target.value
   }
</script>