在Vue中,v-model指令用来实现表单元素和数据的双向绑定。
案例:
输入电话后:
用v-model:
<body>
<div id="app">
<h2>v-model</h2>
<input placeholder="请输入电话" v-model="tel" />
<p>您输入的电话是:{{tel}}</p>
</div>
<script>
new Vue({
el: "#app",
data(){
return {
tel: ''
}
}
})
</script>
</body>
用js替代v-model:
<body>
<div id="app">
<h2>v-model</h2>
<input placeholder="请输入电话" id="userTel" /><br>
您输入的电话是:<p id="uTel"></p>
</div>
<script>
let obj = {}
Object.defineProperty(obj,'userTel',{
get: function(){
console.log("得到值")
},
set: function(val){
console.log("设置值")
document.getElementById("uTel").innerText = val
}
})
document.getElementById("userTel").addEventListener("keyup", function(){
console.log(event)
obj.userTel = event.target.value
})
</script>
</body>