js实现vue双向绑定

最新推荐文章于 2024-04-18 22:48:34 发布

放飞放放风

最新推荐文章于 2024-04-18 22:48:34 发布

阅读量83

点赞数

分类专栏： JS小功能

本文链接：https://blog.csdn.net/what_happen_to_you/article/details/109725260

版权

JS小功能专栏收录该内容

13 篇文章 0 订阅

订阅专栏

js实现vue双向绑定

效果图
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>objectDefineProperty  模拟vue 数据双向绑定</title>
</head>
<body>

<input type="text"  id="userName"/>
<br/>
<span id="uName"></span>
<script>
    var obj ={}
    Object.defineProperty(obj,"name",{
        set:function (val) {
            console.log("set")
            document.getElementById("uName").innerText = val
            document.getElementById("userName").value = val
        },
        get:function () {
            console.log("get")
        }

    })
    document.getElementById("userName").addEventListener("keyup",function () {
        obj.name = event.target.value;
    })
</script>
</body>
</html>

优惠劵

放飞放放风

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现vue双向绑定

js实现vue双向绑定效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>objectDefineProperty 模拟vue 数据双向绑定</title></head><body><input type="text" id="userName"/><br/&g
复制链接

扫一扫