第五章表单控件绑定
在web应用中，经常使用表单向服务端提交一些数据，而在表单中绑定一些如input、change等事件对用户输入的数据进行校验、更新等操作。
在vue.js中、我们可以使用v-model指令同步用户输入的数据到vue实例data属性中，同时会对radio、CheckBox、select等原生表单组件提供一些语法糖使表单操作更加容易。
一.基本用法
text
<div id="box" >
<span>Welcome {
{name}} join China</span>
<hr>
<input type="text" v-model="name" placeholder="join China">
</div>
checkbox
<div id="box" >
<input type="checkbox" id="cb" v-model="checked">
<label for="cb">{
{checked}}</label>
</div>
<script>
new Vue({
el:'#box',
data: {
checked:''
}
});
</script>
用户选中则为true，不选则为false
<div id="box" >
<input type="checkbox" id="flash" value="快车" v-model="bizLines">
<label for="flash">快车</label>
<input type="checkbox" id="premium" value="专车" v-model="bizLines">
<label for="premium">专车</label>
<input type="checkbox" id="bus" value="巴士" v-model="bizLines">
<label for="bus">巴士</label>
<br>
<span>Checked lines : {
{bizLines | json}}</span>
</div>
<script>
new Vue({
el:'#box',
data: {
bizLines:[],
}
});
</script>
-
radio
当单选按钮被选中时，v-model中的变量值会被赋值为对应的value值 -
select
select控件分为单选和多选，所以v-model在select控件的单选和多选上会有不同的表现。
单选
<div id="box" >
<select v-model="bizLine">
<option value="快车value" selected>快车</option>
<option value="专车value">专车</option>
<option value="巴士value">巴士</option>
</select>
<br>
<span>Selected : {
{bizLine}}</span>
</div>
<script>
new Vue({
el:'#box',
data: {
bizLine:[],
}
});
</script>
多选
multiple 属性规定可同时选择多个选项，即多选，
对于 windows：按住 Ctrl 按钮+点击来选择多个选项；
对于 Mac：按住 command 按钮+点击来选择多个选项；
<div id="box" >
<label>
<select v-model='workplaces' multiple="multiple">
<option v-for='city in cities' :value='city.value'>
{
{ city.text }}
</option>
</select>
</label>
<p>workplace: {
{ workplaces.join('|') }}</p>
</div>
<script>
new Vue({
el:'#box',
data: {
cities: [
{
text: '西安', value: '西安'},
{
text: '洛阳', value: '洛阳'},
{
text: '南京', value: '南京'},
{
text: '北京', value: '北京'}
],
workplaces: []
}
});
</script>
二.值绑定
通常情况下，对于radio、checkbox、select组件，通过v-model绑定的值都是字符串，checkbox除外，checkbox可能是布尔值
通过v-bind来代替直接使用value属性，也可以绑定非字符串的值，如数值、对象、数组等。
checkbox
注意：:true-value="" :false-value=""只适合同一个checkbox组只有一个checkbox的情况。如果有多个checkbox，请使用:value进行值绑定。
<div id="box">
<label for="flash">{
{flash.name}}</label>
<input type="checkbox" v-model="toggle" :value ="flash">
<label for="premium">{
{premium.name}}</label>
<input type="checkbox" v-model="toggle" :value ="premium">
<label for="bus">{
{bus.name}}</label>
<input type="checkbox" v-model="toggle" :value ="bus">
</div>
<script>
new Vue({
el:'#box',
data: {
flash:{
name:'快车'},
premium:{
name:'专车'},
bus:{
name:'巴士'},
toggle:[]
}
});
</script>
radio
<div id="box">
<input type="radio" v-model="pick" :value="a">
</div>
select
<p>用户勾选时，vm.selected === {number:123}</p>
<div id="box">
<select name="" id="" v-model="selected">
<option :value="{ number:123}">123</option>
</select>
</div>
v-model 修饰指令
v-model 用来在视图与Model之间同步数据，但是有时候我们需要控制同步发生的时机，或者在数据同步到Model之前将数据转换为Number类型。
我们可以在v-model指令所在的form控件上添加相应的修饰指令来实现这个需求。
lazy在默认情况下，v-model在input事件中同步输入框的值与数据，可以添加一个lazy特性，从而改到在change事件中去同步。
<div id="box">
<input type="text" v-model="msg" lazy>
<br>
{
{msg}}
</div>
<script>
new Vue({
el:'#box',
data: {
msg:'alice88'
}
});
</script>
2. debounce 设置一个最小的延时，在每次敲击之后延时同步输入框的值到Model中。
如果每次更新都要进行高耗操作（ajax请求）时较有用。
<p>debounce</p>
<input type="text" v-model="msg1" debounce="500">
<br>
{
{msg1}}
number当传到后端的字段类型必须是数值的时候，我们可以在v-model所在控件上使用number指令，该指令会在用户输入被同步到Model中时将其转换为数值类型，如果转换结果为NaN，则对应的Model值还是用户输入的原始值。