美文网首页
Vue 双向数据绑定原理

Vue 双向数据绑定原理

作者: 小蜜蜂_1d30 | 来源:发表于2022-03-30 16:25 被阅读0次
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8"/>
        <title>vue的双向数据绑定</title>
      </head>
      <body>
        <input id="inputs" type="" name=""/>
        <p id="ShowCont"></p>
      </body>
    </html>
    <script type="text/javascript">
      /**
       * defineProperty:定义属性
       * 第一个参数:要被定义的对象
       * 第二个参数:要定义或修改的属性名称(任意名称)
      * 第三个参数:将被定义或修改的属性描述
       * */
      var obj={};
      Object.defineProperty(obj,"propertyName",{
        get:function(){
          return obj;
        },
        set:function(newValue){
          document.getElementById("inputs").value=newValue;
          document.getElementById("ShowCont").innerHTML = newValue;
        }
      });
      document.getElementById("inputs").onkeyup = function(e){
        obj.propertyName = e.target.value;
      }
      setTimeout(()=>{
       //没有变化
        // document.getElementById('inputs').value = '99999';
       //视图更新了
        obj.propertyName = '122222';
      },3000)
    
    </script>
    <style>
    
    </style>
    

    相关文章

      网友评论

          本文标题:Vue 双向数据绑定原理

          本文链接:https://www.haomeiwen.com/subject/wwppjrtx.html