简单模拟MVVM数据双向绑定

最新推荐文章于 2020-12-30 14:01:44 发布

weixin_30270889

最新推荐文章于 2020-12-30 14:01:44 发布

阅读量89

点赞数

原文链接：http://www.cnblogs.com/cn2758/p/8079107.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <title>双向绑定</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    input: <input id="testValue" type="text" name="" value="">
    <br/>
    <p>obj.testValue:<span id="obj"></span></p>
    <script>
        var obj = {};
        var _testValue = '';
        Object.defineProperty(obj, "testValue", {
            get: function () {
                return _testValue;
            },
            set: function (value) {
                _testValue = value;
                document.querySelector("#testValue").value = _testValue;
                document.querySelector("#obj").innerHTML = _testValue;
            }
        })
        var input = document.querySelector("#testValue");
        input.onkeyup = function () {
            _testValue = this.value;
            document.querySelector("#obj").innerHTML = obj.testValue;
        }
    </script>
</body>
</html>