目录
表单元素在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单元素。在 Vue 中使用 v-model 指令来实现表单元素和数据的双向绑定，这里有 v-model 的官方文档：表单输入绑定。
v-model 指令只能用于表单元素中：input、textarea、checkbox、radio、select、form。
1、用 v-model 实现表单元素和数据的双向绑定
<body>
<div id="app">
<h4>{{message}}</h4>
<input type="text" v-model="message"/><!--v-model实现表单元素和Model中数据的双向数据绑定-->
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message:'二哈二哈二哈'
}
});
</script>通过上述代码可以实现表单元素和数据的双向绑定，在页面的表单框中修改数据，对应的 vue 实例中的 message 也会随之改变。如果修改 vue 实例中的 message，则对应的表单元素的内容显示也会随之改变。
2、v-model 实现双向绑定的本质
v-model其实是一个语法糖，它背后的本质其实是两个指令的结合：
（1）v-bind 绑定一个 value 值。
v-bind 能实现数据的单向绑定，从 Model 层自动绑定到 View 层，但是无法实现数据的双向绑定。
（2）v-on 给当前元素绑定 input 事件。
v-on：input 是一个动态监听用户在表单中输入数据的事件，它的属性值可以是一个方法，也可以写成下面这个样子。
所以下面两段代码是等同的：
<input type="text" v-model="message">
<input type="text" v-bind:value="message" v-on:input="message=$event.target.value">第二行代码的作用是：通过 v-bind 指令将 Model 层的 message 数据绑定给表单控件，当 Model 层的 message 数据改变时，View 层表单上数据的显示也会随之改变。然后通过 v-on 指令动态监听 input 事件，作用是当监听到用户在表单中输入数据时，通过 $event.target.value 的方式获取此时表单上的数据，并将其赋值给 message，这样就完成了从 View 层到 Model 层的数据绑定。
3、v-model 指令修饰符
关于 v-model 指令的修饰符有：.lazy、.number、.trim。它们主要是给 v-model 指令起到一个辅助作用。官方文档
3.1 .lazy 修饰符
在默认情况下，v-model 在每次 input 事件触发后，会即时将输入框的值与数据进行同步，如果你不希望这样的话，可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">3.2 .number 修饰符
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无被 parseFloat() 解析，则会返回原始的值。
3.3 .trim 修饰符
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
扫一扫
2299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
