js代理实现双向数据绑定

最新推荐文章于 2023-08-11 11:16:34 发布

庆怀王

最新推荐文章于 2023-08-11 11:16:34 发布

阅读量220

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43827424/article/details/107151948

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这个是text不绑定:
    <input type="text" v-model='text' />
    <input type="text" v-model='title' />
    <input type="text" v-model='title' />
    <h4 v-bind="title">这里也会发生更新</h4>

"use strict"
	function View(){
        let proxy = new Proxy({},{
            get(obj,property){},
            set(obj,property,value){
                console.log(value);
                const els = document.querySelectorAll(`[v-model = "${property}"]`)
                const els2 = document.querySelectorAll(`[v-bind = "${property}"]`)
                els.forEach(item=>{
                    item.value = value
                })
                els2.forEach(item=>{
                    item.innerHTML = value
                })
                return true
            }
        })
        this.init = function(){
            const els = document.querySelectorAll('[v-model]')
            console.log(els);
            els.forEach(item=>{
                item.addEventListener('keyup',function(){
                    // console.log("ss");
                    proxy[this.getAttribute('v-model')] = this.value
                });
            });
        }
    }
    new View().init()