核心提示：Object.defineProperty实现简单的双向绑定（代码教程）!DOCTYPE htmlhtml lang=enheadmeta charset=utf-8style type=text/c...
Object.defineProperty实现简单的双向绑定（代码教程）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.box{
width: 200px;background-color: skyblue;
}
img{
display: block;
}
</style>
</head>
<body>
<input type="text" id="btn" />
<p></p>
<script type="text/javascript">
let obj ={};
let temp = {};
document.getElementById('btn').onkeyup = function(){
obj.name = document.getElementById('btn').value;
}
Object.defineProperty(obj,'name',{
get(){
return 1
},
set(val){
temp['name'] = val;
document.querySelector('p').innerHTML = temp['name'];
}
})
</script>
</body>
</html>
改变input框内容即可重新渲染
