数据绑定：
- 在页面中，绑定两个或多个元素之间的值，例如将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
