1，数据的双向绑定

v-model 用于双向数据绑定作用在表单 <input>、<textarea> 及 <select> 元素

　　.lazy 懒监听

　　.number 自动将用户输入的值转换为数值类型

　　.trim 自动过滤用户输入内容的前后空白(中间不能过滤)

2，复选框

单个复选框绑定到布尔值

多个复选框，绑定到同一个数组

3,select

select单选绑定" ",多选绑定数组

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="app">
 9     <!--数据双向绑定-->
10     <label for="username">用户名：</label>
11     <input type="text" v-model="msg" id="username">
12     <p>{{ msg }}</p>
13     <!--单个复选框-->
14     <input type="checkbox" id="checkbok" v-model="checked">
15     <label for="checkbok">{{ checked }}</label>
16     <!--多个复选框-->
17     <input type="checkbox" id="jack" v-model="checkedNames">
18     <label for="checkbok">jack</label>
19     <input type="checkbox" id="john" v-model="checkedNames">
20     <label for="checkbok">john</label>
21     <input type="checkbox" id="mike" v-model="checkedNames">
22     <label for="checkbok">mike</label>
23     <!--懒监听-->
24     <input v-model.lazy="msg">
25     <!--数字显示-->
26     <input type="number" v-model.number="age">
27     <!--清除前后空格-->
28     <input v-model.trim="msg">
29 </div>
30 
31 <script src="../vue.js"></script>
32 <script>
33     new Vue({
34         el:'#app',
35         data(){
36             return {
37                 msg:'alex',
38                 checked:false,
39                 checkedNames:[],
40                 age:0
41             }
42         }
43     })
44 </script>
45 </body>
46 </html>