文章目录
- 1 实现双向数据绑定
1 实现双向数据绑定
通过 Object.defineProperty 方法对 obj.text 属性进行了数据劫持，实现了当 obj.text 的值发生变化时，自动更新输入框和页面上的 < span > 元素的内容。同时，通过监听输入框的 keyup 事件，实时更新 obj.text 的值。
<input id="input" type="text" placeholder="请输入内容">
<span id="span"></span>
let obj = {};
let input = document.getElementById('input');
let span = document.getElementById('span');
input.addEventListener('keyup', function(e) {obj.text = e.target.value;
});
Object.defineProperty(obj, 'text', {configurable: true,enumerable: true,get() {console.log('获取数据了');},set(newValue) {console.log('更新数据了');input.value = newValue;span.innerHTML = newValue;}
});
)