使用new Proxy实现vue数据双向绑定原理

最新推荐文章于 2024-02-29 20:20:54 发布

怒放的生命1991

最新推荐文章于 2024-02-29 20:20:54 发布

阅读量1.3k

点赞数

分类专栏： es6 前端总结知识点知识随笔总结js 文章标签： javascript object es6

本文链接：https://blog.csdn.net/qq_34507902/article/details/108610640

版权

前端总结知识点同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

知识随笔总结js

14 篇文章 0 订阅

订阅专栏

es6

5 篇文章 0 订阅

订阅专栏

<!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="title">
    <input type="text" v-model="title">
    <h4 v-bind="content">这里也会发生更新</h4>
    <h4 v-bind="title"></h4>
</body>

</html>
<script>
    function View() {
        let proxy = new Proxy(
            {}, {
            set(target,property,value) {
                const ele=document.querySelectorAll(`[v-model=${property}]`);
                ele.forEach((item)=>{
                    item.value=value;
                })
                const eleBind=document.querySelectorAll(`[v-bind=${property}]`);
                eleBind.forEach((item)=>{
                    item.innerHTML=value;
                })
            },
            get(target,property) {

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

怒放的生命1991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用new Proxy实现vue数据双向绑定原理

<!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 .
复制链接

扫一扫