# ❓聊聊 Vue 的双向数据绑定,Model 如何改变 View,View 又是如何改变 Model 的
我觉得这里可以用一个简单的 🌰 去概括一下
<input id="input" type="text" />
<div id="text"></div>
1
2
2
let input = document.getElementById('input')
let text = document.getElementById('text')
let data = { value: '' }
Object.defineProperty(data, 'value', {
set: function(val) {
// 同步设置数据值
text.innerHTML = val
},
get: function() {
return input.value
}
})
// 监听输入
window.addEventListener(
'keyup',
function(e) {
data.value = e.target.value
},
false
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22