使用JS原生方法Object.definePropery实现数据的双向绑定

原创于 2019-01-25 15:46:03 发布 · 置顶 · 311 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个简单的双向数据绑定实现方式，通过使用JavaScript的Object.defineProperty方法，实现在输入框中输入内容时，能够实时更新到页面指定元素中显示，展示了数据绑定的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <text>实现双项绑定</text>
  </head>
  <body>
    <input type="text" id="input"></input>
    <span>the input value</span>
    <div id="show"></div>
  </body>
  <script>
    var inputValue = {};
    var inputDemo = document.querySelector("#input");
    var showDemo = document.querySelector("#show");
    Object.defineProperty(inputValue, "values", {
      get: function() {
        return 
      },
      set: function(newValue) {
        showDemo.innerHTML = newValue;
      }
    });
    inputDemo.oninput = function () {
      inputValue.values = this.value;
    }
  </script>
</html>