用原生js实现数据双向绑定

最新推荐文章于 2023-02-17 20:19:06 发布

eziolt7

最新推荐文章于 2023-02-17 20:19:06 发布

阅读量1k

点赞数 2

文章标签： js

本文链接：https://blog.csdn.net/weixin_46847662/article/details/108696177

版权

数据的双向绑定是当视图区的内容变化时，后台与之对应的内容也相应的变化，反之亦然.。比如现在视图区有一个input输入框，改变输入框的内容时，后台与之对应的内容也会改变；改变后台内容时，输入框的内容也会相应的改变。

实现双向绑定需要使用Object的defineProperty方法和事件，用来监听数据的变化以进行数据的同步改变。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta ppt="viewport" content="width=device-width, initial-scale=1.0">
    <title>视图-数据</title>
    <style>
        #app{
            width: 100px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div>
        后台内容:<span></span>
    </div>
    <br>
    输入框:<input type="text" id="input">
</body>
<script>
    var obj={};
    var input=document.getElementById("input");
    var span=document.getElementsByTagName("span")[0];
    Object.defineProperty(obj,"attr",{
        configurable:true,
        enumerable:true,
        set:function(value){//监听后台数据的改变
            attr=value;
            input.value=value;//将后台数据的值同步到输入框
            span.innerHTML=value;//展示后台数据
        },
        get:function(){
            return attr;
        }
    });
    input.onkeyup=function(e){//监听输入框内容的变化
        obj.attr=this.value;//将输入框的值同步到后台数据
    };
</script>
</html>

eziolt7

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用原生js实现数据双向绑定

数据的双向绑定是当视图区的内容变化时，后台与之对应的内容也相应的变化，反之亦然.。比如现在视图区有一个input输入框，改变输入框的内容时，后台与之对应的内容也会改变；改变后台内容时，输入框的内容也会相应的改变。实现双向绑定需要使用Object的defineProperty方法和事件，用来监听数据的变化以进行数据的同步改变。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8
复制链接

扫一扫