简单实现vue中的双向绑定数据

时间 2019-12-06

标签简单实现 vue 双向绑定数据繁體版

原文原文链接

方法很简单，主要用到Object.defineProperty(）这个方法，该会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。javascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
    <div id="app">
        <p v-model="message"></p>
        <input v-model="message" />
    </div>
    <script type="text/javascript">
    var data = {
        message: "max", //model 数据
        list: "xxxxx"
    }

    // 视图改变
    var app = document.getElementById("app");
    var Element = app.querySelectorAll("[v-model]"); //nodelist       类数组
    for (var i = 0; i < Element.length; i++) {
        Element[i].oninput = function() {
            data[this.getAttribute("v-model")] = this.value;
        }
    }

    Object.defineProperty(data, "message", { //对象   描述对象
        get: function() {
            return this.str;
        },
        set: function(val) {
            var Element = app.querySelectorAll("[v-model=message]");
            for (var i = 0; i < Element.length; i++) {

                Element[i].value = val;
                Element[i].innerText = val;
            }
            this.str = val;
        }
    });

    </script>
</body>

</html>

注：当设置message属性时，set()会自动修改p元素里面的内容html