双向数据绑定的原理

113 阅读1分钟

在js中,给对象添加属性可以像下面这样。

obj.age = '20'
obj.say = function {}

还可以使用Object.defineProperty来定义新属性或者修改原有的属性。

简单介绍一下Object.defineProperty的用法

Object.defineProperty语法

Object.defineProperty(obj,prop,descriptor)

在语法中

obj是需要操作的目标对象。
prop是需要定义或者修改属性的名字。
descriptor所拥有的特性。


双向数据绑定是通过Object.defineProperty来定义一个新的属性。


双向数据绑定代码实现


<div id="app">  <input type="text" id="txt">  <p id="show-txt"></div>


脚本


let obj = {};

let writedom = document.getElementById('txt');

let showdom = document.getElementById("show-txt");

object.defineProperty(obj,'txt',{

get:function(){

 return obj

},

set:function(newValue){

showdom.innerHTML = newValue

}

})

writedom.addEventListener("keyup",function(e){

obj.txt = e.target.value

})