使用Object.definePropert实现简易双向绑定

最新推荐文章于 2022-07-24 15:19:16 发布

范范_

最新推荐文章于 2022-07-24 15:19:16 发布

阅读量299

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_40853132/article/details/123086405

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>使用Object.definePropert实现简易双向绑定</title>
</head>
<body>
  <input type="text" id="input" />
  <p id="p"></p>

  <script>
    var input = document.getElementById("input")
    var p = document.getElementById("p")
    var obj = {}
    // 监听obj对象的age属性
    Object.defineProperty(obj, 'age', {
      get: function () {
        return val
      },
      // 当给age属性赋值时，触发set操作
      set: function (val) {
        // 给input和p标签赋值
        input.value = val;
        p.innerHTML = val;
      }
    })
    // 监听input标签的input事件，给obj对象的age属性赋值
    input.addEventListener('input', function (e) {
      obj.age = e.target.value
    })
  </script>
</body>
</html>