即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。
- 获取dom对象
- 设置代理对象
- 配置代理选项
- 添加事件
- 实现双向数据绑定
{
// 获取dom元素
const txt = document.getElementById('txt')//span
const inp = document.querySelector('#inp');//input
// 初始化代理对象
const obj = {}
// 代理选项
const handle = {
get(target, key) {
console.log('get');
return Reflect.get(target, key)
},
set(target, key, value) {
修改一下前端页面,让input标签里的值事实变化,把span标签也修改一下
if (key === 'text') {
inp.value = inp.value === value ? inp.value : value
txt.innerHTML = value
}
//更新OBJ
//前端页面改了,对象也要修改
return Reflect.set(target, key, value)
}
}
//创建具体的代理
let objProxy = new Proxy(obj, handle)
//监听input的状态
inp.addEventListener('keyup', function (e) {
objProxy.text = e.target.value//e.target相当于input
console.log(obj);
})
objProxy.text = 1234567890
}