表单控件在实际的业务场景中是比较常见的，单选，多选，下拉选择，输入框等，用这些控件可以完成数据的录入、校验以及提交等。vue给我们提供了v-model指令用于在表单类元素上双向绑定数据。
1.input上v-model的使用
<template>
<div>
<input type="text" v-model="message" placeholder="请输入..."/>
<p>输入的内容是：{{message}}</p>
</div>
</template>
<script>
export default {
name: "VModel",
data() {
return {
message: ''
}
}
}
</script>
<style scoped>
</style>
当我们在输入框内输入的同时，下面的{{message}}的内容也会实时将内容渲染在视图中，如下：
同样的在文本域中的使用和在input中的使用是一致的，拿上面的代码我们将input替换为textarea：
<textarea v-model="message" placeholder="请输入..."/>运行程序：
在这里我们需要提醒一下，在我们输入中文的时候，只有我们敲下汉字时才会触发视图更新，在我们输入拼音的阶段，视图是不会被更新的。
如果我们想实时的更新视图，此时我们可以使用@input来代替v-model。
<textarea @input="handleMessage" placeholder="请输入..."/>此时，我们需要添加处理函数handleMessage：
handleMessage(e){
console.log(e.target)
this.message = e.target.value
}2.单选按钮使用v-model
单选按钮在单独使用的时候不需要使用v-model，可以直接使用v-bind来绑定一个布尔类型的值：
<input type="radio" :checked="picked" @click="pickedClick()"/>
<label>只有一个单选按钮的使用</label>data数据：
picked: false这里我们给单选按钮添加一个click事件，点击时切换选中状态：
pickedClick() {
console.log("before click:" + this.picked)
this.picked = !this.picked
console.log("after click:" + this.picked)
}运行效果：
点击后：
当我们组合使用radio来实现互斥选择效果的时候，就需要使用v-model和value配合来达到我们想要的效果：
<input type="radio" id="vue" v-model="selectedRadio" value="vue"/>
<label for="vue">VUE</label>
<input type="radio" id="js" v-model="selectedRadio" value="js"/>
<label for="js">JS</label>
<input type="radio" id="css" v-model="selectedRadio" value="css"/>
<label for="css">CSS</label>
<p>当前选择的是：{{selectedRadio}}</p>data数据：
selectedRadio: 'vue',运行程序：
当v-mode绑定的值selectedRadio和value的值一致时，就会选中该项。
这里我们需要明白的就是当我们选中一个单选按钮的时候，v-model绑定的值会更改为当前单选按钮的value值，此时两者的值是相等的，所以该单选按钮就被选中了。
3.复选框使用v-model
复选框使用v-model和单选按钮的用法基本一致，这里只说明一下稍微有差异的地方，在组合使用复选框时，也是v-model和value配合使用，多个复选框都绑定到同一个数组类型的数据，value的值在数组中，就会选中这一项，在勾选时，value的值会添加到这个数组中：
<input type="checkbox" id="vue" v-model="checked" value="vue"/>
<label for="vue">VUE</label>
<input type="checkbox" id="js" v-model="checked" value="js"/>
<label for="js">JS</label>
<input type="checkbox" id="css" v-model="checked" value="css"/>
<label for="css">CSS</label>
<p>当前选择的是：{{checked}}</p>data数据：
checked: ['vue']运行效果图：
然后我们勾选其他复选框：
4.选择列表
<select v-model="selected" >
<option v-for="option in options" :value="option.value">
{{option.text}}
</option>
</select>
<p>当前选择的是：{{selected}}</p>这里multiple属性是指定可以多选，此时v-model绑定的是一个数组，data数据如下：
selected: ['vue']然后我们看下options数组的定义：
options:
[
{
text: 'VUE',
value: 'vue'
},
{
text: 'JS',
value: 'js'
},
{
text: 'CSS',
value: 'css'
}
],运行效果：
这里我们使用shift或者ctrl来进行多选：
如果我们使用单选模式，那么selected的定义应该如下：
selected: 'vue'效果图：
这里还有一个地方值得我们留意的：
<option v-for="option in options" :value="option.value">那就是在这里我们绑定了value的值，如果含有value值，那么v-model会优先匹配value值，如果没有，则直接匹配option的text。
下面我们介绍几个和v-model相关的几个修饰符，这些修饰符用于控制数据同步的时机。
1.lazy
在输入框中，v-model默认是在input事件中同步输入框的数据的，使用修饰符lazy则会变为在change事件中同步，如下
<input type="text" v-model.lazy="message"/>
<p>当前输入是：{{message}}</p>运行程序：
然后输入文字：
可以看到p标签内的数据并没有实时更新，当输入框失去焦点或者按下回车键时，视图重新渲染：
2.number
使用该修饰符可以将输入转化为Number类型，否则我们得到的数据的类型是String。
<input type="text" v-model.number="message"/>
<p>当前输入是：{{message}}</p>data数据：
message: 123,程序运行效果：
当我们输入非数字的时候：
p标签的内容并没有更新，当输入框失去焦点的时候，会回复原来的数字值。
但是有一点大家需要小心，即使我们使用了修饰符number，如果我们给绑定的值赋初始值为String类型时，这个修饰符是不会起作用的。
比如：
message: 'dd123' <input type="text" v-model.number="message"/>
<p>当前输入是：{{message}}</p>然后我们运行程序：
这一点大家需要留心一下，我估计这也是vue的一个小bug吧。。
3.trim
这个修饰符可以自动过滤输入的首尾空格：
message: ' dd123 ' <input type="text" v-model.trim="message"/>
<p>当前输入是：{{message}}</p>运行效果：
然后我们接着输入空格在末尾：
失去焦点后，重新进入输入框，通过光标大家也可以看到，首尾的空格被移除了。