单向数据绑定
把Model绑定到view,Model更新,View将会自动更新
双向数据绑定
用户更新view,Model数据也自动被更新
注:Vue,Angular双向数据绑定;React单向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>双向数据绑定</title>
</head>
<body>
<div id="app">
<input type="text" id="txt">
<p id="show-txt"></p>
</div>
</body>
<script>
let obj = {};
let writedom = document.getElementById('txt');
let showdom = document.getElementById("show-txt");
//defineProperty会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
Object.defineProperty(obj,'txt',{
get:function(){
return obj
},
set:function(newValue){
showdom.innerHTML = newValue
}
});
writedom.addEventListener('keyup',function(e){
obj.txt = e.target.value
})
</script>
</html>