双向数据绑定的原理

184 阅读1分钟

ccf8c903f3374e259c8562cecdfd7849.jpg

    <input type="text">
    <div class="demo"></div>
 // 双向数据绑定的原理
        let ipt = document.querySelector('input')
        let demo = document.querySelector('.demo')
        // new Proxy 
        let proxy = new Proxy({}, {
            set (target, key, value) {
                console.log(target, key, value); // {}, 'msg', '123'
                demo.innerHTML = value
            }
        })

        // 注册一个事件
        ipt.addEventListener('input', (e) => {
            console.log(e.target.value); // 监听输入框输入的值
            console.log(proxy);
            proxy.msg = e.target.value 
        })