携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第二十六天，点击查看活动详情
前言
假如我们有一个表单输入框，在进行表单处理的时候，我们想把输入框的内容同步的更新到定义的JavaScript变量时，我们可能会如下写：
<input
:value="text"
@input="event => text = event.target.value">
不过对于这种情况，vue做了相应的简化，通过一个v-model指令即可实现。
<input v-model="text">
当然，对于textarea、<input type="checkbox"> 、 <input type="radio">以及<select>都可以使用v-model指令，他会根据你所使用的标签同步的使用相应的事件。
v-model
当我们使用textarea的时候，我们需要主义的是，他并不支持表达式：
<!-- 错误 -->
<textarea>{{ text }}</textarea>
<!-- 正确 -->
<textarea v-model="text"></textarea>
相应的，需要通过v-model来实现。
v-model与select
当我们使用 v-model 与 select 结合的时候，需要注意一点，当v-mode的初始值没有和 select中的任何一项匹配时，select会渲染成一个 未选择的状态。这在 ios 上 会导致无法选择第一项，因为他并不会触发change事件。所以这种情况下，可以提供一个 为空值的禁用选项，解决这个问题：
<div>选中的值: {{ selected }}</div>
<select v-model="selected">
<option disabled value="">请选择任意一项</option>
<option>一</option>
<option>二</option>
<option>三</option>
</select>
修饰符
vue官方也为v-model指令，提供了一些修饰符，便于其的操作。
.lazy
看过上面的实例，我们知道v-mode是通过input事件进行更新的。但是如果我们想通过change 事件进行更新的话，可以添加lazy修饰符。
<input v-model.lazy="message" />
.number
通过number可以将输入的自动转换为数字。
<input v-model.number="count" />
.trim
通过trim修饰符，可以很好的去除用户输入内容两端的空格。
<input v-model.trim="message" />
