实现双向数据绑定

最新推荐文章于 2024-09-13 23:32:49 发布

琴～～

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量111

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/129477506

版权

该示例代码演示了如何使用JavaScript的Object.defineProperty方法创建一个对象属性，该属性与HTML输入元素和文本标签进行双向绑定。当用户在输入框中输入时，文本内容会实时更新到页面上的span元素中。

摘要由CSDN通过智能技术生成

实现双向数据绑定

<!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>
  <input type="text" id="input" />
  <span id="span"></span>
  <script>
    let obj = {};
    let input = document.getElementById('input');
    let span = document.getElementById('span');
    Object.defineProperty(obj, 'text', {
      configurable: true,
      enumerable: true,
      get() {
        console.log('获取数据了')
      },
      set(newVal) {
        console.log(newVal, 'newVal is');
        input.value = newVal;
        span.innerHTML = newVal;
      }
    })
    // 输入监听
    input.addEventListener('keyup', function (e) {
      obj.text = e.target.value;
    })
  </script>

</body>
</html>