簡單實現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

相關標籤/搜索