v-model 双向数据绑定

通过v-model指令可以实现双向数据绑定

HTML部分：

 1     <div id="app">
 2         <input type="text" v-model="textVal" :value="textVal">
 3         <p>文本内容：{{ textVal }}</p>
 4         <div>
 5             <label for="">男
 6                 <input type="radio" name="gender" v-model="radioVal" value="male">
 7             </label>
 8             <label for="">女
 9                 <input type="radio" name="gender" v-model="radioVal" value="female">
10             </label>
11             <p>单选框：{{ radioVal }}</p>
12         </div>
13 
14         <div>
15             <label for="">狗
16                 <input type="checkbox" name="animal" v-model="checkboxVal" value="dog">
17             </label>
18             <label for="">猫
19                 <input type="checkbox" name="animal" v-model="checkboxVal" value="cat">
20             </label>
21             <label for="">猴子
22                 <input type="checkbox" name="animal" v-model="checkboxVal" value="monkey">
23             </label>
24             <label for="">猪
25                 <input type="checkbox" name="animal" v-model="checkboxVal" value="pig">
26             </label>
27             <p>复选框：{{ checkboxVal }}</p>
28         </div>
29 
30         <select name="" id="" v-model="selectVal">
31             <option value="BJ">北京</option>
32             <option value="SH">上海</option>
33             <option value="SZ">深圳</option>
34             <option value="JX">江西</option>
35         </select>
36         <p>单选下拉框：{{ selectVal }}</p>
37 
38 
39         <select name="" id="" v-model="mulSelectVal" multiple>
40                 <option value="apple">苹果</option>
41                 <option value="orange">橙子</option>
42                 <option value="bananer">香蕉</option>                
43             </select>
44        
45         <p>复选下拉框：{{ mulSelectVal }}</p>
46     </div>

JS部分：

 1     var app = new Vue({
 2             el: "#app",
 3             data() {
 4                 return {
 5                     textVal: "这是一段文字。。。",
 6                     radioVal: "",
 7                     checkboxVal: [],
 8                     selectVal: "",
 9                     mulSelectVal: []
10                 }
11 
12             }
13         });

初始化页面：

当修改元素的值时，下面的p标签内容也会随着改变。