数据双向绑定的一些理解

最新推荐文章于 2023-07-28 15:24:35 发布

夜雨Gecer

最新推荐文章于 2023-07-28 15:24:35 发布

阅读量150

点赞数

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

本文链接：https://blog.csdn.net/weixin_39370093/article/details/119781444

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

代码

model => view

view => model

代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input v-model='msg' />
        <div v-html='msg'></div>
    </div>
    <script>
        let msg = '';
        Object.defineProperty(this, 'msg', {
            get: () => {
                return msg;
            },
            set: (val)=>{
                msg=val;
                let divList= document.querySelectorAll('#app div[v-html]');
                divList.forEach((div)=>{
                    div.innerHTML=msg;
                })
               
            }
        });

        let inputList= document.querySelectorAll('#app input[v-model="msg"]');
        inputList.forEach((input)=>{
            input.addEventListener('input',(val)=>{
                this.msg=val.target.value;
            })
        })

        console.log(this)
    </script>
</body>

</html>

此段代码实现了属性【msg】的双向绑定。

model => view

1.通过Object.defineProperty在this上创建了一个msg的对象，对象里面声明了set与get。

2.当this.msg='XXX'时触发set方法。找到【挂载点】#app下面所有声明属性v-html='msg'的dom元素。

3.对找到的dom元素进行插值。

view => model

1.找到【挂载点】#app下面所有声明属性v-model='msg'的dom元素。

2.在这些元素下面添加input事件监听。

3.如果在input中输入则会触发绑定的事件，完成赋值，同时也触发了msg的set方法。于是完成了数据的双向绑定

夜雨Gecer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据双向绑定的一些理解

目录代码model => viewview => model代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev
复制链接

扫一扫