原生JS实现双向绑定

话不多说直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- ------用于展示监听------ -->
    <input type="text">
    <div></div>
    <script>
        //------获取元素------
        let put = document.querySelector('input');
        let div = document.querySelector('div');
        //------定义一个需要监听的对象------
        this.obj = {
            name: '张三'
        }
        window.xxx = this;
        //------监听对象里面的数据------
        Object.defineProperty(this.obj, 'name', {

            //------获取数据------
            get() {
                return put.value
            },
            //------设置数据------
            set(newValue) {
                div.innerHTML = newValue;
                put.value = newValue;
            }
        })

        put.onkeyup = (e) => {
            this.obj.name = e.target.value
        }
    </script>
</body>

</html>
版权声明：本文为m0_48123036原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。