模拟vue双向绑定

最新推荐文章于 2022-09-01 17:12:31 发布

李书明

最新推荐文章于 2022-09-01 17:12:31 发布

阅读量216

点赞数

分类专栏： javascript 与 ES6

本文链接：https://blog.csdn.net/lsmxx/article/details/109120061

版权

javascript 与 ES6 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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

<body>
<div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}

    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })

    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

</html>