正文
先贴出示例代码：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="content">
name: {{name}}<br/>
<input type="text" v-model = 'name'>
</div>
</body>
<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>
</html>
Proxy：
let p = new Proxy(target, handler);
参数
- target
用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。 - handler
一个对象，其属性是当执行一个操作时定义代理的行为的函数。
重点在于 Proxy实现了对象的赋值，然后用input.value,input.oninput和定义的data对象进行相互绑定。
1959
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
