简单的双向绑定原生js

最新推荐文章于 2024-05-07 00:22:54 发布

时遇¥.¥..

最新推荐文章于 2024-05-07 00:22:54 发布

阅读量87

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_46544600/article/details/117486286

版权

笔记专栏收录该内容

51 篇文章 2 订阅

订阅专栏

<body>
  <div id="app">
    输入：<input type='text' id='input' /><br>
    动态值：<input type='text' id="show"/><br>
  </div>
  <script>
    let input = document.getElementById("input");
    let show = document.getElementById("show");
    // 被劫持对象
    let defineObj = {
      value:'10',
      _value:"10", // 代理
    };
    // 输入框添加 input事件
    input.addEventListener("input", (e) => {
      // console.log(e);
      // 给劫持对象设置为输入后的值
      defineObj.value = e.target.value;
      console.log(e.target.value)
    })
    show.addEventListener("input", (e) => {
      // console.log(e);
      // 给劫持对象设置为输入后的值
      defineObj.value = e.target.value;
      console.log(e.target.value)
    })
    Object.defineProperty(defineObj, 'value', {
      //  Get：指读取属性时调用的函数。
      // Set：指写入属性时调用的函数。
      get() {
        return  this._value;
      },
      set(newVal) {
        this._value = newVal;
        input.value = newVal;
        show.value = newVal;
      }
    })
  </script>
</body>