Vue双向数据绑定简易理解版

最新推荐文章于 2024-09-04 20:18:34 发布

msmior

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量144

点赞数

文章标签： vue javascript vue.js

本文链接：https://blog.csdn.net/SarcoMao/article/details/105130692

版权

<!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>
</body>
<script>
    // 双向绑定：数据，视图，当视图变化,数据变;数据变,视图变
    const ipt = document.querySelector("input");
    const div = document.querySelector("div");
   //视图视图的变化可以轻易通过oninput事件来实现
   /*  ipt.oninput = function () {
        div.innerText = this.value;
    }*/
   
   //但是Vue中是数据与视图的双向绑定
   //需要通过 Object.defineProperty()方法实现
    let data = {
        str: "你还好吗?",
    }
    let str = data.str;
    //当改变data中的str数据时 会发生拦截
    Object.defineProperty(data, "str", {
        get() {
        //获取data中的str数据时 触发
            return str
        },
        set(v) {
        //v 是改变之后的值
       // 当改变data中的str数据时 触发
            str = div.innerText = ipt.value = v
            console.log(111111, this === data)
            //此时的this是拦截的对象
        }
    })
    div.innerText = ipt.value = str;
    ipt.oninput = function () {
        data.str = this.value;
    }
</script>

</html>

msmior

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue双向数据绑定简易理解版

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
复制链接

扫一扫