v-model 指令在表单控件元素上创建双向数据绑定。
1 <!-- 文本 -->
2 <p>Message is:{{message}}</p>
3 <input v-model="message" placeholder="edit me">
4 <!-- 多行文本 -->
5 <p>{{message1}}</p>
6 <textarea v-model="message1" placeholder="add multiple lines"> </textarea><br>
7 <!-- 复选框 -->
8 <label for="checkbox">{{checked}}</label>
9 <input type="checkbox" id="checkbox" v-model="checked"><br>
10 <!-- 多个勾选框 -->
11 <input type="checkbox" id="A" value="A" v-model="checkedNames">
12 <label for="A">A</label>
13 <input type="checkbox" id="B" value="B" v-model="checkedNames">
14 <label for="B">B</label>
15 <input type="checkbox" id="C" value="C" v-model="checkedNames">
16 <label for="C">C</label>
17 <p>Checked :{{checkedNames}}</p>
18 <!-- 单选按钮 -->
19 <input type="radio" id="one" value="one" v-model="picked">
20 <label for="one">one</label><br>
21 <input type="radio" id="two" value="two" v-model="picked">
22 <label for="two">two</label>
23 <p>Picked: {{picked}}</p>
24 <!-- 选择列表 -->
25 <select v-model="selected">
26 <option value="" disabled="">choose</option>
27 <option >A</option>
28 <option >B</option>
29 <option >C</option>
30 </select>
31 <p>Selected: {{selected}}</p>
32 <!-- 多选列表 -->
33 <select v-model="selectedMul" multiple style="width:50px">
34 <option>A</option>
35 <option>B</option>
36 <option>C</option>
37 </select>
38 <p>Selected: {{selectedMul}}</p>
39 <!-- 动态选线 v-for -->
40 <select v-model="selectedFor">
41 <option v-for="option in options" v-bind:value="option.value">
42 {{option.text}}
43 </option>
44 </select>
45 <p>Selected v-for: {{selectedFor}}</p>
data:{
message:"single line",
message1:"multiple lines",
checked:true,
checkedNames:[],
picked:'',
selected:'',
selectedMul:[],
selectedFor:'A',
options:[
{text:'One',value:'A'},
{text:'Two',value:'B'},
{text:'Three',value:'C'},
]
修饰符
.lazy 修饰符,将同步的v-model 转为change 事件中同步
<input v-model.lazy="msg">
.number 自动将用户的输入值转为Number 类型
.trim 自动过滤输入的首位空格