v-model双向绑定原理

Posted 2020-11-24 sphjy

 1 <div id="app">
 2             <div>{{msg}}</div>
 3             <!-- 写法1 -->
 4             <input type="text" v-bind:value="msg" v-on:input="handle">
 5             <!-- 写法2 -->
 6             <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
 7             <!-- 写法3 -->
 8             <input type="text" v-model="msg">
 9         </div>
10         <script src="./vue.js" type="text/javascript"></script>
11         <script type="text/javascript">
12             var vm = new Vue({
13                 el: ‘#app‘,
14                 data: {
15                     msg:‘Hello Vue!‘
16                 },
17                 methods: {
18                     handle:function(event){
19                         // 使用输入域中最新的数据来覆盖原来的数据
20                         this.msg = event.target.value;
21                     }
22                 }
23             });
24         </script>

可以看到v-model实际上等同于 通过动态绑定value为msg  然后绑定input事件,把当前input标签的value值赋值给msg实现的