Vue实现双向数据绑定代码-详解

最新推荐文章于 2023-02-09 11:57:32 发布

瞌睡熊怪

最新推荐文章于 2023-02-09 11:57:32 发布

阅读量407

点赞数

分类专栏： Vue JavaScript 文章标签： vue js java javascript json

本文链接：https://blog.csdn.net/qq_40036799/article/details/115309089

版权

Vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

Vue实现双向数据绑定代码

Vue实现双向数据,通过Object.defineProperty()中set()方法与get()。即发布订阅、订阅模式，（发布、订阅模式参考资料），对数据进行拦截。实现双向数据绑定（本人上一篇文章有讲过基本原理）。

代码

Object.defineProperty()
传入三个参数:

监听的对象
自定一个属性名(案例中定义为binding,当多个监听用于区分)
json对象,设置get、set方法(对应被调用、被修改)

<!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>
    <input type="text" name="" id="inp">
    <p id="context"></p>
    <script>
        let obj = {};
        Object.defineProperty(obj, 'binding', {
            get() {
                return obj;
            },
            set(newValue) {
                document.getElementById('inp').value = newValue;
                document.getElementById('context').innerHTML = newValue
            }
        });
        document.getElementById('inp').onkeyup = (e)=>{
            obj.binding = e.target.value;
        }
    </script>
</body>

</html>

在这里插入图片描述

验证

添加一个按钮。点击按钮给p标签赋值，观察input框内值的变换。

<!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>
    <input type="text" name="" id="inp">
    <p id="context"></p>
    <!-- 验证:添加按钮 -->
    <button id="btn">赋值666</button>
    <script>
        let obj = {};
        Object.defineProperty(obj, 'binding', {
            get() {
                return obj;
            },
            set(newValue) {
                document.getElementById('inp').value = newValue;
                document.getElementById('context').innerHTML = newValue
            }
        });
        document.getElementById('inp').onkeyup = (e)=>{
            obj.binding = e.target.value;
        };
        // 验证:添加事件
        document.getElementById('btn').onclick = (e)=>{
            obj.binding = 666;
        }
    </script>
</body>

</html>