6.1 基本用法
表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。Vue扣提供了v-mo del 指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。
<div >
<input type="text" v-model="message" placeholder="输入...">
<p>输入的内容：{{message}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:""
}
})
</script>
使用v-model 后，表羊控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性，对于在＜textarea></textarea> 之间插入的值，也不会生效．使用v-model 时，如果是用中文输入法输入中文，一般在没有选定饲组前，也就是在拼音阶段， Vue 是不会更新数据的，当敲下汉字时才会触发史新。如果希望总是实时更新，可以用＠ input 来替代v-model . 事实上， v-model 也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。
单选按钮：
单选按钮在单独使用时，不需要v-model ，直接使用v-bind 绑定一个布尔类型的值， 为真时选中， 为否时不选，例如：
<div >
<input type="radio" :checked="picked">
<label>单选按钮</label>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
picked:true
},
})
</script>
如果是组合使用来实现互斥选择的效果，就需要v-model 配合value 来使用：
<div >
<input type="radio" v-model="picked" value="html" >
<label for="html">HTML</label>
<br>
<input type="radio" v-model="picked" value="js" >
<label for="js">JavaScript</label>
<br>
<input type="radio" v-model="picked" value="css" >
<label for="css">CSS</label>
<br>
<p>选择的项是：{{picked}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
picked:'js'
},
})
</script>
复选按钮：
复选框分为单独使用和组合使用，复选框单独使用时，也是用v-model来绑定一个布尔值。组合使用时需要v-model和value一起使用，多个数值绑定到同一种类型的数组数据中，value值在数组中，选择过程是双向的，选中时，数值也会push到数组中。
<div >
<input type="checkbox" v-model="checked" value="html" >
<label for="html">HTML</label>
<br>
<input type="checkbox" v-model="checked" value="js" >
<label for="js">JavaScript</label>
<br>
<input type="checkbox" v-model="checked" value="css" >
<label for="css">CSS</label>
<br>
<p>选择的项是：{{checked}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
checked:{'html','css'}
},
})
</script>
选择列表：
选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。
<div >
<select v-model="selected">
<option>html</option>
<option value='js'>JavaScript</option>
<option>css</option>
</select>
<p>选择的项是：{{selected}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
selected:'html'
},
})
</script>
< option＞是备选项，如果含有value 属性， v-model 就会优先匹配value 的值： 如果没有， 就会直接匹配＜ option＞的text ，比如选中第二项时， selected 的值是js ， 而不是JavaScript 。给＜selected＞添加属性multiple 就可以多选了， 此时v -model 绑定的是一个数组， 与复选框用法类似
<select v-model = ”selected" multiple>在业务中，＜ option＞经常用v -for 动态输出， value 和text 也是用v-bind 来动态输出的， 例如：
<select v-model="selected">
<option v-for="option in options"
:value="">{{}}</option>
</select>
<p>选择的项是：{{selected}}</p>
6.2 绑定值
上一节介绍的单选按钮、复选框和选择列表在单独使用或单选的模式下， v-model 绑定的值是一个静态字符串或布尔值， 但在业务中，有时需要绑定一个动态的数据， 这时可以用v-bind 来实现。
单选按钮:
<div >
<input type="radio" v-model="picked" :value="value">
<label>单选按钮</label>
<p>{{picked}}</p>
<p>{{value}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
picked:false,
value:123
},
})
</script>
在选中时，===，值都是123。
复选框：
<div >
<input type="checkbox" v-model="toggle" :true-value:"value1"
:false-value:"value2">
<label>复选框</label>
<p>{{toggle}}</p>
<p>{{value1}}</p>
<p>{{value2}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
toggle:false,
value1:'a',
value2:'b',
},
})
</script>
勾选时， === app .valuel ; 未勾选时， ＝==app.value2.
选择列表：
<div >
<select v-model="selected">
<option :value="{number:123}">123</option>
</select>
{{}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
selected:''
},
})
</script>
当选中时， 是一个Object ，所以 === 123 。
6.3 修饰符
与事件的修饰符类似， v-model 也有修饰符，用于控制数据同步的时机。
.lazy:
在输入框中， v-model 默认是在input 事件中同步输入框的数据（除了提示中介绍的中文输入法情况外），使用修饰符.lazy 会转变为在change 事件中同步，示例代码如下：
<div >
<input type="text" ="message">
<p>输入的内容为：{{message}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>
这时，message不是实时改变的，只在失去焦点或者回车才更新。
.number
使用修饰符.number 可以将输入转换为Number 类型，否则虽然你输入的是数字，但它的类型其实是String ，比如在数字输入框时会比较有用
<input type=”number ” =”message” >.trim:
修饰符.trim 可以自动过滤输入的首尾空格，示例代码如下：
<input type=”text” =”message” >