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

不要秃头啊啊

于 2023-02-17 20:19:06 发布

阅读量356

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_60676278/article/details/129093186

版权

使用原生js实现数据的双向绑定。
关于vue的双向数据绑定，其核心是 Object.defineProperty()方法

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

Object.defineProperty(obj, prop, desc)
obj：需要定义属性的当前对象。
prop：当前需要定义的属性名。
desc：具体的改变方法。

<!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">
    <div id="box" style="color: red;">
    </div>
</body>
<script>
    let obj = {
        inputValue: 200
    }
    let _InputValue = obj.inputValue
    let box = document.querySelector("#box")
    let input = document.querySelector("input")
    input.value = obj.inputValue
    box.innerHTML = obj.inputValue

    // 用户输入进行对象的属性操作变化
    input.oninput = function (event) {
        obj.inputValue = this.value
    }

    console.log(obj.inputValue)
    Object.defineProperty(obj, 'inputValue', {

        // 对象中的方法
        get: function () {
            console.log(obj.inputValue)
            return _InputValue
        },
        // 对象中简洁语法
        set(value) {
            // 修改属性
            _InputValue = value
            // dom渲染
            box.innerHTML = value
            input.value = value
        }
    })
</script>

</html>