使用v-model对表单控件进行双向绑定
1:input控件和textarea控件。
<div id="app">
<input type="text" v-model="message"/>
<p>消息是:{{message}}</p>
<textarea v-model="message2"></textarea>
<p style="white-space: pre">{{message2}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'vue学习',
message2:''
}
});
</script>
2:复选框
单个复选框时,v-model中绑定的值,选定结果为true,未选定结果为false。多个复选框时,v-model中绑定的值为一个数组,选定的复选框的value值,放在数组中。数组中值的顺序按选中的顺序排列。
<div id="app">
<p>单个复选框</p>
<input type="checkbox" id="checkbox" v-model="checked"/>
<label for="checkbox">{{checked}}</label>
<p>多个复选框</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"/>
<label for="runoob" >Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames"/>
<label for="google" >Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"/>
<label for="taobao" >Taobao</label>
<p>选择的值为:{{checkedNames}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
checked:false,
checkedNames:['Google']
}
});
</script>
这一个示例中,需要注意的是:单个复选框不涉及value,其v-model对应选定与否,选定则为true。反之为false。多个复选框,v-model中指定的属性,其值应该是String数组。数组中可以有默认值,对应value的控件会默认选中。如果没有
默认值,也要写一个空数组:[],如果是字符串或者null,就变为了一个复选框的效果。
其实,正确的理解方式为:根据自己的需要,是想要v-model双向绑定的结果为布尔值还是数组。如果是数组,那么对应的属性默认就需要是数组,否则,无论属性值初始定义为是null、字符串
或者是数值型,都会在绑定后变为boolean。
3:单选框
单选框多个和一个没有什么区别。v-model中绑定的属性,其值应该是字符串,对应着控件中的value。可以有默认值,对应value的控件中会默认选中。默认值可以为null。示例略。
4:select
select控件的v-model绑定的属性,对应的是option的value值。v-model放置在select控件中。没有什么特别的。示例略。
修饰符:
1:.lazy
v-model默认的是在input事件中同步输入框的数据和值。使用:v-model.lazy="message",将在input事件中同步变为在change事件中同步
2:.number
如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:
<input v-model.number="message" type="number"/>
3:.trim
过滤首尾空格。<input v-model.trim="message"/>