vue 双向数据绑定原理

最新推荐文章于 2024-05-08 18:08:25 发布

wsx1212123

最新推荐文章于 2024-05-08 18:08:25 发布

阅读量99

点赞数

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

本文链接：https://blog.csdn.net/wsx1212123/article/details/98252010

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

vue 双向数据绑定原理

利用了es5中的一个方法.Object.defineproperty(),它有三个参数,
Object.defineproperty(obj,‘val’,attrObject),

参数1: obj是属性所在的对象,
参数2: ‘val’,属性名,它是一个string类型,
参数3: { }属性所描述的对象

详情可以看Object.defineproperty的文档

<html lang="en">
<head>
    <meta charset="UTF-8">  
    <title>Document</title>
</head>
<body>
    <input type="text" id="userName">
    <br>
    <span id="uName"></span>
    <script>
        var obj={
            pwd:"123456"
        };
        Object.defineProperty(obj,"userName",{ // 传入obj对象的一个属性  属性名是自定义的
            get:function(){
                console.log("lalala");
            },
            set:function(val){
                //console.log("lololo");
                document.getElementById("uName").innerText=val;
                document.getElementById("userName").value=val;
            }
        });
        document.getElementById("userName").addEventListener("keyup", function(event){
            obj.userName=event.target.value;
        })
    </script>
</body>
</html>

控制台输入obj.userName=“sasa”，界面效果图如下：