<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input placeholder="请输入电话" id="username" />
<p id="uName">显示值</p>
<h1></h1>
<script>
let obj = {
}
Object.defineProperty(obj,"username",{
set:function(val){
console.log("设置值")
console.log("set,val:",val)
username=val
document.getElementById('uName').innerHTML=val
document.querySelector('h1').innerHTML=val
},
})
document.getElementById('username').addEventListener('keyup',function(){
// let inputVal = document.getElementById('username');
// console.log(inputVal.value)
// obj.username = inputVal.value
obj.username = this.value
})
</script>
</body>
</html>
v-model双向绑定的底层原理(纯html页面的双向绑定,不适用vue)使用js
最新推荐文章于 2024-02-21 13:02:23 发布