双向绑定原理：数据劫持结合“发布-订阅”模式的方式，通过 Object.defineProperty() 的 set 和 get，在数据变动时发布消息给订阅者触发监听，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
</head>
<body>
<div>
<input type="text" id="input">
<p id="inputValue"></p>
</div>
</body>
<script>
// 手写一个双向绑定
let obj = {}
document.querySelector('#input').onkeyup = function (e) {
obj.name = e.target.value
}
Object.defineProperty(obj,'name', {
get() {
return obj
},
set(newValue) {
document.querySelector('#input').value = newValue // 赋值给input框
document.querySelector('#inputValue').innerHTML = newValue // 赋值给p标签
}
})
</script>
</html>
扫一扫
3290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
