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