html JS实现简单的数据双向绑定

Posted 2021-05-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html JS实现简单的数据双向绑定相关的知识，希望对你有一定的参考价值。

<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 JS实现简单的数据双向绑定的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js 2.0 | P2 双向绑定和vue-devtools