vue双向绑定的原理

最新推荐文章于 2024-09-24 11:41:48 发布

郑建零零发

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量88

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52421092/article/details/129487416

版权

文章讲述了如何使用HTML的<input>标签创建文本输入框，并结合JavaScript中的Object.defineProperty方法来监听和设置username属性。当input框的keyup事件触发时，输入值会被赋给对象的username属性，同时更新<span>元素显示的内容。

摘要由CSDN通过智能技术生成

html:

<input type="text" id="username">
<br>
显示值： <span id="uName"></span>

script:

let obj = {}
Object.defineProperty(obj, "username", {  // obj是侦听的对象  username是侦听的属性
    get: function() {
        console.log("取值")
    },
    set: function(val) {
        console.log("设置值")
        document.getElementById("uName").innerText = val
    }
})
// input 监听键盘弹起事件   获取到的值赋值给obj.username,    上面Object.defineProperty侦听到了obj里面的username的值发生了改变， 就会执行set方法
document.getElementById("username").addEventListener("keyup", function() {
    obj.username = event.target.value
})

关注博主即可阅读全文