016、双向绑定实现

最新推荐文章于 2022-01-25 18:27:28 发布

jiuwanli666

最新推荐文章于 2022-01-25 18:27:28 发布

阅读量247

点赞数

分类专栏： Vue 文章标签：数据绑定双向绑定

本文链接：https://blog.csdn.net/jiuwanli666/article/details/84068035

版权

Vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

通过 Object.defineProperty 实现。
自定义双向绑定：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" id="txt">
        <p id="show-txt"></p>
    </div>
    <script>
        var obj = {}
        Object.defineProperty(obj, 'txt', {
            get: function () {
                return obj
            },
            set: function (newValue) {
                document.getElementById('txt').value = newValue
                document.getElementById('show-txt').innerHTML = newValue
            }
        })
        document.addEventListener('keyup', function (e) {
            obj.txt = e.target.value
        })
    </script>
</body>
</html>