第 29 题：聊聊 Vue 的双向数据绑定，Model 如何改变 View，View 又是如何改变 Model 的 #34
Description
<div id="content">
name: {{name}}<br/>
<input type="text" v-model = 'name'>
</div>
<script>
const el = document.getElementById('content');
const template = el.innerHTML;
const _data = {
name: 'mark',
}
//new Proxy(target, handler);
let changeName = new Proxy(_data, {
set(obj, name, value){
obj[name] = value;
render()
}
})
render();
function render(){
el.innerHTML = template.replace(/\{\{\w+\}\}/g, str=>{
str = str.substring(2, str.length-2);
return _data[str];
})
Array.from(el.getElementsByTagName('input')).filter(ele => {
return ele.getAttribute('v-model');
}).forEach(input=>{
let name = input.getAttribute('v-model');
input.value = changeName[name];
input.oninput = function(){
changeName[name] = this.value;
}
})
}
</script>