21-vue2-v-model原理-双向绑定
小于 1 分钟
21-vue2-v-model原理-双向绑定
监听键盘输入事件,将值赋给对象,
对象被 Object.defineProperty 劫持,设置值时,进行额外操作,修改 html 元素的值
<input placeholder="请输入名字" id="username" />
显示值:
<p id="uName"></p>
<script>
let obj = {};
Object.defineProperty(obj, "username", {
// 取值
get: function () {
console.log("取值");
},
set: function (val) {
console.log("设置值");
document.getElementById("uName").innerText = val;
},
});
document
.getElementById("username")
.addEventListener("keyup", function () {
// event
obj.username = event.target.value;
});
</script>