利用Object.defineProperty方法实现数据双向绑定

使用Object.defineProperty方法实现数据双向绑定

1.代码如下:

html 部分:  
<input  type="text"  id="input">
<div  id="text">  </div>    //为了看到效果设置一个div用于展示内容
<button id="btn">click me change value<button>

js  部分:

let  obj={};   //用于数据双向绑定的对象
let input=document.getElementById("input");
let div=document.getElementById("text");
let btn=document.getElementById("btn");

div.innerText=input.value;  //初始化

Object.defineProperty(obj,"value",{
    set:function(val){
		input.value=val;
		div.innerText=val;//为了看到效果
	},
	get:function(){
		return input.value;
	}
})

input.oninput=function(e){
	obj.value=e.target.value;
}
btn.onclick=function(){
 obj.value='属性值改变了';
}