js 数据双向绑定

数据绑定：

在页面中，绑定两个或多个元素之间的值，例如将input的值绑定到h1上，改变input输入框的值，h1标签的文字也自动更新。
思路：
a. 添加Input和h1标签
b. 给input标签添加oninput()监听事件，当改变input的输入值时，h1的值也跟着改变。

html：

<h1 id="title"></h1>
<input type="text" id="text" >

js:

var title = document.getElementById('title');
var text = document.getElementById('text');
    text.oninput = function () {
        title.innerHTML = text.value;
 }

结果:

1.png

在代码中更改值的最常见方法是赋值。
js:

text.value = 'zhang';
title.innerHTML = text.value;

即是通过手动赋值来实现值的更改。

封装一下代码，实现更新input的值，h1的值也跟着改变。用Object.defineProperty(obj, prop, descriptor)。

obj:被定义或修改属性的对象;
prop:要定义或修改的属性名称;
descriptor :对属性的描述.

js:

Object.defineProperty(text,'val',{
     get: function () {
          return this.value;
      },
      set: function (str) {
           this.value = str;
           title.innerHTML = str;
       }
    });
    text.val = 'zhangzhangzhang';

即：为input添加一个val 属性，val的值与input.value是关联的（‘this.value = str’），同时在val属性的setter中添加了更新h1内容的代码（'title.innerHTML = str'），这样就通过设置input的val的属性值来同时更新input.value和h1的文本了。如图：

2.png

传送门：
https://www.cnblogs.com/lovebread/p/7875203.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

js 数据双向绑定

数据绑定：

推荐阅读更多精彩内容