精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
Vuejs中如何使用指令v-model完成表单的数据双向绑定-创新互联
这篇文章给大家分享的是有关Vuejs中如何使用指令v-model完成表单的数据双向绑定的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
创新互联是一家集网站建设,内蒙古企业网站建设,内蒙古品牌网站建设,网站定制,内蒙古网站建设报价,网络营销,网络优化,
内蒙古网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
基本用法表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。
Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。
例如下面的例子：
输入的内容是：{{message}}
在输入框输入的同时，{{message}}也会实时将内容渲染在视图中。
如图6-1所示：
对于文本域
输入的内容是：
{{text}}
提示：
提示v-model后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性，对于在之间插入的值，也不会生效。
使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发鞥新。
如果希望总是实时更新，可以用@input来替代v-model。
事实上，v-model也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。
例如下面的示例：
输入的内容是：{{message}}
来看看更多的表单控件。
单选按钮：
单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为true时选中，为false时不选。
例如：
如果是组合使用来实现互斥选择的效果，就需要v-model配合value来使用：
HTML
JavaScript
CSS
您选择的是：{{picked}}
数据picked的值与表单按钮的value值一致时，就会选中该项，所以当前状态下选中的是第二项。
如图6-2所示：
复选框：
复选框也分单独使用和组合使用，不过用法稍与单选不同。
复选框单独使用时，也是用v-model来绑定一个布尔值。
例如：
选择状态：{{checked}}
在勾选时，数据checked的值改为了true，
组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数据当中，就会选中这一项。
这一过程也是双向的，在勾选时，value的值也会自动push到这个数组中。
实例代码如下：
HTML
JavaScript
CSS
你选择的是：{{checked}}
当前状态下的结果如图6-3所示：
选择列表：
选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。
先看一下单选的示例代码：
JavaScript
你选择的是：{{selected}}
如果没有，就会直接匹配
比如选中第二项时，selected的值为js，而不是JavaScript。
给
JavaScript
你选择的是：{{selected}}
在业务中，
{{item.text}}
你选择的是：{{selected}}
虽然用选择列表
{{selected.number}}
当选中时，app.selected是一个Object，所以app.selected.number===123。
6.3 修饰符与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。
.lazy：
在输入框中，v-model默认是在input事件中同步输入框的数据(除了提示中介绍的中文输入法情况外)。
使用修饰符.lazy会转变为在change事件中同步，示例代码如下：
{{message}}
这是，message并不是实时改变的，而是在失焦或按回车时才更新。
.number：
使用修饰符.number可以将输入转换为Number类型，否则虽然你输入的是数字，但它的类型其实是String。
比如在数字输入框时会比较有用，示例代码如下：
{{typeof message}}
.trim：
修饰符.trim可以自动过滤输入的首尾空格，示例代码如下：
{{message}}
从Vue.js 2.x开始，v-model还可以用于自定义组件，满足定制化的需求
感谢各位的阅读！关于“Vuejs中如何使用指令v-model完成表单的数据双向绑定”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
本文名称：Vuejs中如何使用指令v-model完成表单的数据双向绑定-创新互联
分享地址：http://www.cdkjz.cn/article/dchsdp.html
