详细分析vue表单数据的绑定
v-model的基本用法
一、本节说明
前面的章节我们学习了v-bind指定，可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的，那么视图是如何影响数据的呢？那就要学到我们这一节的内容v-model。v-model可以将表单输入绑定到对应的模型数据。
二、 怎么做
我们通过v-model实现一个简单的需求
通过表单input绑定模型数据message，表单数据变化data.message也发生变化
然后通过Mustache表达式，将变化之后的message数据显示到视图页面上
四、 深入
v-model实际上是一个语法糖，也就是简写，他实际上包含了两个操作：
- v-bind绑定value属性
- v-on监听表单元素的输入事件，并改变数据
所以，下面的两种写法实现的效果是一致的。
这一节我们来讲解第一种方式实现的多选，及使用v-model指令数据绑定方法。
二、 怎么做
三、 效果（动态图片）
浏览器效果：
- v-model绑定模型数据mvp，实现单选效果
- v-model绑定模型数据allDefensiveTeam，结合multiple属性实现多选效果
- 多选选项的模型数据为数组类型
- 可以为单选及多选设置默认值，即：默认的勾选项
三、 效果（动态图）
- lazy修饰符：默认情况下，input输入会实时影响v-model绑定的数据。加上lazy修饰符，只有当输入框失去焦点会输入回车的时候，才会去改变v-model绑定的数据。
- number修饰符：默认情况下，输入框中输入的无论是数字还是字母，都会被当做字符串处理。加上number修饰符，输入内容会被当做数值类型处理。
- trim修饰符：可以自动去掉输入内容左右两边的空格
三、 效果
- 由上图可以看到，当第一个输入框失去焦点的时候，name：curry，才发生数据改变。
- 输入年龄31，被当作数值类型处理（默认输入是当作字符串类型。因为初始值为null，所以显示是object类型）
- 第三个输入框，输入内容前后都有空格，但是加上trim修饰符，就自动去掉了。
以上就是详细分析vue表单数据的绑定的详细内容，更多关于vue表单数据的绑定的资料请关注来客网其它相关文章！
