v-model two-way binding principle

 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 is                  EL: '#app' ,
 14                  Data: {
 15                      MSG: 'Vue the Hello!'
 16                  },
 . 17                  Methods: {
 18 is                      handle: function (Event) {
 . 19                          // use the latest data input fields to overwrite the original data 
20 is                          the this a .msg = event.target.value;
 21 is                      }
 22 is                  }
 23 is              });
 24          </ Script>

We can see the v-model is virtually identical to the dynamic binding value for the msg and then bind the input event, the assignment of the current value of the input value to the msg tag implementation

Guess you like

Origin www.cnblogs.com/sphjy/p/11981992.html