v-model 其实就是一个语法糖,它的背后本质上是包含两个操作
1 v-bind绑定一个value属性
2 v-on指令给当前元素绑定input事件
<body>
<div id="app">
1 v-model双向绑定
<br/>
<input type=‘text‘ v-model = ‘message‘ >
<hr />
2 v-bind 实现双向绑定
<br/>
<input type=‘text‘ v-bind:value = ‘message‘ v-on:input=‘valChange‘ >
<hr />
2 v-bind 第二种写法
<br/>
<input type=‘text‘ v-bind:value = ‘message‘ @input="message =$event.target.value" >
<br/>
结果:{{message}}
</div>
</body>
<script>
const app = new Vue({
el:‘#app‘,
data:{
message:‘你好‘
},
methods:{
valChange(event){
this.message = event.target.value
}
}
})
</script>

1
<input type=‘text‘ v-model = ‘message‘ >
2
<input type=‘text‘ v-bind:value = ‘message‘ v-on:input=‘valChange‘ >
methods:{ valChange(event){ this.message = event.target.value } }
3
<input type=‘text‘ v-bind:value = ‘message‘ @input="message =$event.target.value" >
三种写法效果相同
原文:https://www.cnblogs.com/polax/p/12891233.html