1 单行文本
对于输入框input，直接使用v-model绑定属性即可，该属性需要在data中定义。用法如下：
<input v-model="content">
var vm = new Vue({
...
data: {
content: ""
}
})
示例：在输入框中输入内容，该内容显示在输入框下
<div id="app">
<input type="text" v-model="content">
<br>
{
{content}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
content: ""
}
})
</script>
2 多行文本
多行文本textarea直接使用v-model绑定属性即可，该属性在data中定义。具体如下：
<textarea v-model="text"></textarea>
var vm = new Vue({
...
data: {
text: ""
}
})
示例代码：
<div id="app">
<textarea v-model="text"></textarea>
<br>
<div style="white-space: pre-line;">{
{ text }}</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
text: ""
}
})
</script>
3 复选框
复选框除了要用v-model绑定名称之外，还需要给input传递value值，表示选中之后的值。具体如下：
<input type="checkbox" v-model="xxx" value="value1">
无论出现几个复选框，这一组复选框的v-model的值都是xxx，value值则根据按钮的内容随意设置。如果是选项组，则在data中要初始化xxx为空数组，如果是单个复选框，初始化为空字符串即可，具体如下：
var vm = new Vue({
el: "#app",
data: {
xxx: [] / ""
}
})
示例代码：
<div id="app">
<input type="checkbox" v-model="fruit" value="apple">苹果
<input type="checkbox" v-model="fruit" value="banana">香蕉
<input type="checkbox" v-model="fruit" value="peer">鸭梨
<div>爱吃的水果有：{
{fruit}}</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
fruit: []
}
})
</script>
4 单选按钮
单选按钮除了要用v-model绑定名称之外，还需要给input传递value值，表示选中之后的值。具体如下：
<input type="radio" v-model="xxx" value="value1">
单选按钮一般是搭配使用的，那么这一组的单选按钮的v-model的值都是xxx，value值则根据按钮的内容随意设置。如果默认选中某个按钮，则xxx需要在data中初始化为该按钮的value值，具体如下：
var vm = new Vue({
el: "#app",
data: {
xxx: "value1" // 表示默认选中value值为value1的选项
}
})
示例代码：
<div id="app">
<input type="radio" v-model="number" value="One">One
<input type="radio" v-model="number" value="Two">Two
<input type="radio" v-model="number" value="Three">Three
<div>选中的值是：{
{number}}</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
number: "Two"
}
})
</script>
5 选择器
选择器要在select上面使用v-model绑定属性，并且这个属性要在data中进行定义，而option可以选择是否传入value属性，如果传入了value属性，那么属性的值为value值，如果没有传入，属性的值为选项的内容。具体如下：
<select v-model="xxx">
<option value="value1">option1</option>
<option>option2</option>
...
</select>
var vm = new Vue({
el: "#app",
data: {
xxx: ""
}
})
示例代码：
<div id="app">
<select v-model="hasValue">
<option value="has">有value值，value为has</option>
<option>无value值</option>
</select>
选择了：{
{hasValue}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
hasValue: ""
}
})
</script>
在上面的效果中，我们可以看到，最初的时候选择器是空白的，如果要设置一个默认选项，那么在data中定义的属性值要初始化，有value属性要初始化为value属性，无则初始化为option的内容。
var vm = new Vue({
el: "#app",
data: {
xxx: "value值/option的内容"
}
})
示例代码：
<div id="app">
<select v-model="hasValue">
<option value="has">有value值，value为has</option>
<option>无value值</option>
</select>
选择了：{
{hasValue}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
hasValue: "无value值"
}
})
</script>
6 修饰符
v-model提供了一些修饰符：
| 修饰符 | 说明 |
|---|---|
.number |
将输入的合法符串转为数字 |
.lazy |
监听change事件而不是input |
.trim |
移除输入内容两端空格 |
例如，当收集用户年龄时，类型应该是number，但是input收集的内容是string类型：
<div id="app">
<input type="number" v-model="age">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
age: ""
}
})
</script>
这是需要用到.number修饰符，将类型改为number类型：
<input type="number" v-model.number="age">
例如，当输入框会输入很多内容时，v-model会对内容实时进行监视，使用.lazy修饰符可以在内容全部输入完成之后，文本框失去焦点时再获取：
<div id="app">
<textarea v-model.lazy="text"></textarea>
具体内容：{
{text}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
text: ""
}
})
</script>
