第六章：vue.js-表单与v-model（基础篇）
表单类空间承载了一个网页数据的录入与交互，本章将介绍如何使用指令v-model完成表单的双向绑定。
6.1基本用法
表单在实际业务中较为常见，比如单选、多选、下拉选择、输入框等，用他们可以完成数据的录入、校验、提交等。Vue.js提供了v-model指令，用于表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。例如下面的例子：
<div id="app">
<input type="text" v-model="message" placeholder="输入……">
<p>输入的内容是：{{message}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
message:''
}
})
</script>
在输入框输入的同时，{{message}}也会实时将内容渲染在视图中。
下面我们来看看更多的表单控件：
单选按钮：
单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为否时不选，例如：
<div id="app">
<input type="radio" :checked="picked">
<label>单选按钮</label>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
picked:true
}
})
</script>
如果是组合使用来实现互斥选择的效果，就需要v-model配合value来使用：
<div id="app">
<input type="radio" v-model="picked" value="html" id="html">
<label for="html">HTML</label>
<br>
<input type="radio" v-model="picked" value="js" id="js">
<label for="js">JavaScript</label>
<br>
<input type="radio" v-mode="picked" value="css" id="css"?
<label for="css">CSS</label>
<br>
<p>选择的项是：{{picked}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
picked:'js'
}
})
</script>
复选框
复选框也分单独使用和组合使用，不过用法稍与单选不同。复选框单独使用时，也是用v-model来绑定一个布尔值，例如：
<div id="app'>
<input type="checkbox" v-model="checked" id="checked">
<label for="checked">选择状态</label>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
checked:false
}
})
</scipt>
组合使用时：
<div id="app">
<input type="checkbox" v-model = "checked" value="html" id="html">
<label for="html">HTML><label>
<br>
<input type="checkbox" v-model = "checked" value="js" id="js">
<label for="js">JavaScript</label>
<br>
<input type="checkbox" v-model = "checked" value="css" id="css">
<label for="css">CSS</label>
<br>
<p>选择的项是：{{checked}}
</div>
<script>
var app = new Vue({
el:'#app',
data:{
checked:['html','css']
}
})
</script>
选择列表
选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。先看一下示例代码：
<div id="app">
<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>
tips:<option>是备选项，如果含有value属性，v-model就会优先匹配value值；如果没有，就会直接匹配<option>的text值，如上示例第二项，选中selected的值是js。
给<select>添加属性multiple就可以多选了，此时v-model绑定的是一个数组，与复选框用法类似，示例代码如下：
……
<select v-model="selected" multple>
……
在业务中，<option>经常用v-for动态输出，value和text也是用v-bind来动态输出的，例如：
<div id="app">
<select v-model="selected">
<option v-for="option in options" :value="option.value">
{{option.text}}
</option>
</select>
<p>选择的项是：{{selected}}</p>
</div>
<script>
var app = new Vue({
el:'#app',
options:[
{text:'html',value:'html'},
{text:'JavaScript',value:'js'},
{text:'CSS',value:'css'},
]
})
</script>
6.2绑定值
单选按钮（代码与6.1中单选按钮对比）
……
<input type="radio" :checked="picked" :value="value">
……
data:{
picked:false,
value:123
}
……
在选中时，app.picked===app.value,值都是123
复选按钮（代码与6.1中复选按钮对比）
……
<input type="checkbox" v-model="toggle" id="toggle"
:true-value="value1" :false-value="value2">
……
data:{
toggle:false;
value1:'a',
value2:'b'
}
……
勾选时：app.toggle===app.value1,未勾选时，app.toggle===app.value2;
选择列表（代码与6.1中选择列表对比）
……
<option :value="{number:123}">123</option>
……
当选中时，app.selected是一个Object，所以app.selected.number=123.
6.3修饰符
与事件的修饰符类似，v-mdel也有修饰符，用户控制数据同步的时机。
.lazy:
在输入框中，v-model默认是在input事件中同步输入框的数据（除了提示中介绍的中文输入情况外），使用修饰符.lazy会转变为在change事件中同步，示例代码如下：
……
<input type="text" v-model.lazy="message">
……
这时，message并不是实时改变的，而是在失焦或按回车时才更新。
.number:
使用修饰符.number可以将输入转化为Number类型，否则虽然你输入的是数字，但它的类型其实是String，比如在数字输入框时会比较有用，示例代码如下：
……
<input type="number" v-model.number="message">
……
.trim
修饰符.trim可以自动过滤输入的首尾空格，示例代码如下：
……
<input type="text" v-model.trim="message">
……
