js中的set get实现双向绑定
<body>
<input type="text" id="inp">
<h1 id="hhh"></h1>
<script>
var obj = {
a: 'sjifeijfisife',
get fun() {
return this.a
},
set fun(n) {
document.getElementById('inp').value = n;
document.getElementById('hhh').innerHTML = n;
}
}
document.getElementById('hhh').innerHTML = obj.fun
document.getElementById('inp').addEventListener('keyup', function(e) {
obj.fun = e.target.value;
})
</script>
</body>
Object.defineProperty实现双向绑定
Object.defineProperty 对象方法
双向绑定实现
<body>
<input type="text" id="demo">
<div id=xxx></div>
<script>
const obj = {};
Object.defineProperty(obj, 'name', {
set: function(value) {
document.getElementById('xxx').innerHTML = value;
document.getElementById('demo').value = value;
}
});
document.querySelector('#demo').oninput = function(e) {
obj.name = e.target.value;
}
obj.name = '';
</script>
</body>
3996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
