<!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>
数据双向绑定-demo
输入框一:<input type="text" id="one" />
输入框二:<input type="text" id="two" />
<script>
let one = document.getElementById('one');
let two = document.getElementById('two');
// mvc ==>数据控制层 hasownProperty()
let obj = new Proxy({}, {
// 设置值控制中心
set(traget, prokey, val) {
console.log('one==>', val);
if (prokey == 'one') {
two.value = val;
return true;
} else if (prokey == 'two') {
one.value = val;
return true;
}
},
// 取值控制中心
get() {
return 0
}
})
one.addEventListener('keyup', () => {
// two.value=one.value 这样做也可以 但是没有数据控制层不好维护
obj.one = one.value;
})
two.addEventListener('keyup', () => {
obj.two = two.value;
})
// console.log(obj.hasOwnProperty('one'), '===>')
</script>
</body>
</html>
07-08
1万+
1万+
08-29
876
876
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
