使用Object.defineProperty实现简单的双向数据绑定mvvm

最新推荐文章于 2024-07-11 19:31:59 发布

我是一只探索的程序猿

最新推荐文章于 2024-07-11 19:31:59 发布

阅读量736

点赞数

分类专栏： javascript 文章标签：数据绑定 defineProperty Object mvvm

本文链接：https://blog.csdn.net/qq_37811638/article/details/84304897

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

双向数据绑定的原理是：可以将对象的属性绑定到UI，具体的说，我们有一个对象，该对象有一个name属性，当我们给这个对象name属性赋新值的时候，新值在UI上也会得到更新。同样的道理，当我们有一个输入框或者textarea的时候，我们输入一个新值的时候，也会在该对象的name属性得到更新。

下面是一个通过 Object.defineProperty 来实现一个简单的数据双向绑定。通过该方法来监听属性的变化。
实现的简单效果如下：页面上有一个input输入框和div显示框，当在input输入框输入值的时候，div也会显示对应的值，当我打开控制台改变 obj.name="输入任意值"的时候，按回车键运行下，input输入框的值也会跟着变，可以简单的理解为模型-> 视图的改变，以及视图 -> 模型的改变。如下代码：

<!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>标题</title>
  </head>
  <body>
    <h3>使用Object.defineProperty实现简单的双向数据绑定</h3>
    <input type="text" id="input" />
    <div id="div"></div>
    
	<script>
        var obj = {};
        var inputVal = document.getElementById("input");
        var div = document.getElementById("div");

        Object.defineProperty(obj, "name", {
          set: function(newVal) {
            inputVal.value = newVal;
            div.innerHTML = newVal;
          }
        });
        inputVal.addEventListener('input', function(e){
          obj.name = e.target.value;
        });
    </script>
	
  </body>
</html>

效果图:

附：Object.defineProperty 函数 (JavaScript)详解

我是一只探索的程序猿

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用Object.defineProperty实现简单的双向数据绑定mvvm

双向数据绑定的原理是：可以将对象的属性绑定到UI，具体的说，我们有一个对象，该对象有一个name属性，当我们给这个对象name属性赋新值的时候，新值在UI上也会得到更新。同样的道理，当我们有一个输入框或者textarea的时候，我们输入一个新值的时候，也会在该对象的name属性得到更新。下面是一个通过 Object.defineProperty 来实现一个简单的数据双向绑定。通过该方法来监听属...
复制链接

扫一扫

专栏目录