js:使用proxy代理模拟vue双向绑定

效果图

  1. 初始值:
    js:使用proxy代理模拟vue双向绑定_第1张图片
  2. 变化后
    js:使用proxy代理模拟vue双向绑定_第2张图片

源码

<!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>Document</title>
  </head>
  <body>
    <h1 v-bind="name">123</h1>
    <input type="text" v-model="name" />
    <input type="text" v-model="name" />

    <script>
      // 绑定值
      function getValue(key) {
        const directives = ["bind", "model"];
        directives.forEach((directive) => {
          document
            .querySelectorAll(`[v-${directive}="${key}"]`)
            .forEach((item) => {
              switch (directive) {
                case "bind":
                  item.innerHTML = proxy[key];
                  break;
                case "model":
                  item.value = proxy[key];
                  break;
                default:
                  break;
              }
            });
        });
      }

      // 代理
      const proxy = new Proxy(
        { name: "初始值" },
        {
          get(obj, key) {
            return obj[key];
          },
          set(obj, key, value) {
            obj[key] = value;
            getValue(key);
          },
        }
      );
      // 初始化值
      getValue("name");
      // 绑定change事件
      document.querySelectorAll(`[v-model="name"]`).forEach((item) => {
        item.addEventListener("keyup", () => {
          proxy.name = item.value;
        });
      });
    </script>
  </body>
</html>

你可能感兴趣的:(前端,javascript,前端)