Vue双向绑定

最新推荐文章于 2024-10-05 17:19:34 发布

原创最新推荐文章于 2024-10-05 17:19:34 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue双向绑定

本文通过一个简单的示例展示了如何使用发布-订阅者模式来实现实时数据更新。通过HTML和JavaScript代码，输入框的值变化会实时反映在页面上的显示区域，这背后运用了观察者模式的核心思想。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要通过发布-订阅者模式实现的
啥话也不用说上代码！！！
（仅供本人学习使用）

<body>
    <input type="text" id="input" placeholder="请输入吧">
    <div id="app">{{name}}</div>
    <script>
        let data = {
            name:""
        }
        let tem = {
            name:""
        }
        function init(){
            let inputDOM = document.getElementById("input")
            let divDOM = document.getElementById("app")
            inputDOM.value = data.name
            divDOM.innerText = data.name
        }
        init();
        Object.defineProperty(data, "name", {
            enumerable:true,
            set(newVal){
                tem.name = newVal;
                init();
            },
            get(){
                return tem.name
            }
        })
         let inputValue = document.getElementById("input")
         inputValue.addEventListener("input", function (ev) {
             data.name = ev.target.value
         })
    </script>
</body>