js实现双向数据绑定

甘大猫

已于 2022-04-11 20:44:26 修改

阅读量385

点赞数

文章标签： javascript

于 2022-04-11 19:11:03 首次发布

本文链接：https://blog.csdn.net/weixin_61560990/article/details/124106696

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>双向数据绑定</title>
  </head>

   
  <body>

    <div id="app">
      <div>
        <label for="">输入的内容</label>
        <input type="text" id="value" />
      </div>

      <div>
        <label for="">要展示的内容</label>
        <!-- 文本双向绑定 -->
        <span id="show"></span>
        <!-- <input type="text" id="show"> -->
      </div>
    </div>

  </body>

  <script>

    // 监听劫持的对象
    let obj = {};

    Object.defineProperty(obj, "value", {

      get: function (obj) {
        console.log("调用了get方法");
        return obj;
      },

      set: function (val) {
        console.log("调用了set方法");
        console.log(val);
        /* 普通元素赋值就是          innerText 或 innerHTML
           两个输入框之间赋值就是     value
        **/
        document.getElementById("show").innerHTML = val;
        // document.getElementById("show").value = val;
      },

    });

    // 全局绑定keyup输入事件
    document.addEventListener("keyup", function (e) {
      console.log(e.target.value);
      obj.value = e.target.value;
    });

  </script>
</html>

防抖版本的双向数据绑定

把下面的全局绑定 keyup事件更换成下面代码就实现了防抖版本的双向数据绑定

    let timer = null;
    document.addEventListener("keyup", function (e) {
      // 如果存在就默认清除一次
      clearTimeout(timer);
      // 开启定时器
      timer = setTimeout(() => {
        console.log(e.target.value);
        obj.value = e.target.value;
      }, 1000);
    });