proxy 手写双向数据绑定

最新推荐文章于 2024-09-11 15:33:18 发布

匆匆忙忙慌慌张张

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量154

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42213796/article/details/115217442

版权

Vue Proxy 动态数据绑定 v-model v-bind

关键词由CSDN通过智能技术生成

<!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" v-model="content">
    <input type="text" v-model="content">
    <h4 v-bind="content">dd</h4>
    <input type="text" v-model="title">
    <input type="text" v-model="title">
    <h4 v-bind="title">数据改变</h4>
</body>
<script>
    function View(){
        let proxy = new Proxy({},{
            get(obj,key){
                return obj[key]
            },
            set(obj,key,value){
                document.querySelectorAll(`[v-model="${key}"]`).forEach(item=>{
                    item.value = value
                })
                document.querySelectorAll(`[v-bind="${key}"]`).forEach(item=>{
                    item.innerHTML = value
                })
            },
        })
        this.init = function(){

        }
        document.querySelectorAll('[v-model]').forEach(item => {
            item.addEventListener('keyup',function(){
                proxy[this.getAttribute('v-model')] = this.value
            })
        })
    }
    new View().init()
</script>
</html>