实现双向数据绑定
文章目录
- 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;
}
});