Vue学习第四周 v-model

v-model

v-model指令用于绑定表单标签的数据。

绑定form表单

表单元素有

• input输入框
• radio单选框
• CheckBox多选框
  ……

<input type＝"text" v-model＝"message" placeholder＝"输入数据">
<div>{{message}}</div>
data:{
	message:''
}

在输入框上输入时，输入的内容渲染到底下的div中。
textarea类型的文本输入框也是相同的效果。

使用v-model后，表羊控件显示的值只依赖所绑定的数据，不再关心初始化时value属性。

单选按钮（radio）

只有一个单选框的时候，可以使用v-bind绑定一个boolean类型的值。

<input type="radio" :checked="picked">

data:{
	picked:false
}

当多个单选框联用的时候，使用v-model搭配value可以实现绑定value的值且单选框之间选择是互斥的。

<input type="radio"  v-model="picked" value='a'>
<input type="radio"  v-model="picked" value='b'>
<input type="radio"  v-model="picked" value='c'>


<div>{{picked}}</div>

data:{
	picked:" "
}

多选框（checkbox）

当多选框单个使用的时候，v-model绑定一个boolean值。
当多个多选框绑定同一个值的时候，data中对应的是一个数组，内容为多选框对应的value值。数据按照勾选的顺序push进入数组。

下拉选择

这个也有单选和多选，但是这种元素基本上没有用过。一般项目里都是用div或者ul、li标签实现下拉选择。

绑定值

单选按钮、复选框和选择列表在单独使用或单选的模式下， v-model绑定的值是一个静态字符串或布尔值， 但在业务中，有时需要绑定一个动态的数据， 这时可以与v-bind搭配来实现。

<input type="radio"  v-model="picked" value='value'>
<p>{{picked}}</p>
<p>{{value}}</p>

data:{
	picked:false,
	value:"abc"
	}

选中时，picked的值会变成value对应的字符串abc

其他的组件也类似。

修饰符

.lazy

用于控制数据同步的时效。v-model默认是同步更新数据的，但是加上修饰符后，只有当输入框失去焦点或者按回车数据才会被更新。

<input type＝"text" v-model.lazy＝"message" placeholder＝"输入数据">

.number

输入框输入的值默认是字符串类型的，加上这个修饰符会将数据转换成数字类型绑定到data中。在数字输入框时会比较有用。（这里可以测试一下输入字符串会怎样）

<input type＝"number" v-model.number＝"message" placeholder＝"输入数据">

.trim

加上修饰符.trim可以自动过滤输入的首尾空格。