vue实现数据双向绑定原理实现

蔚落 2022-01-30 11:49 474阅读 0赞

直接上代码吧：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <input type="text" id="userName">
  11.     <span id="uName"></span>
  12. </body>
  13. </html>
  14. <script>
  15.  var obj={};
  16.  const inputIdEle=document.getElementById('userName');
  17.  // Object.defineProperty设置对象属性的
  18.  Object.defineProperty(obj,'uName',{
  19.      set:function(val){
  20.          console.log('set init');
  21.          inputIdEle.value=val;
  22.          document.getElementById('uName').innerHTML=val;
  23.      },
  24.      get:function(){
  25.          console.log('get init');
  26.      },
  27.  })
  28.  //通过键盘事件可以把input value值给到对象 这个时候对象的 set方法触发然后赋值给到span
  29.       inputIdEle.addEventListener('keyup',function(event){
  30.                obj.uName=event.target.value;
  31.          })
  32. </script>

发表评论

表情：
评论列表 （有 0 条评论，474人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue数据双向绑定的实现

    实现原理 利用Proxy代理实现对对象的代理，重写set方法，在对该代理对象就行赋值时，更新绑定该对象属性值的DOM元素。 首先定义两个input标签以及它们的labe

    女爷i女爷i/ 0 赞/ 19 阅读