RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间：8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案

如果是组合使用来实现互斥选择的效果，就需要v-model配合value来使用：


 
 HTML
 
 
 JavaScript
 
 
 CSS
 
 
您选择的是：{{picked}}

数据picked的值与表单按钮的value值一致时，就会选中该项，所以当前状态下选中的是第二项。
 如图6-2所示：

Vuejs中如何使用指令v-model完成表单的数据双向绑定

复选框：

复选框也分单独使用和组合使用，不过用法稍与单选不同。

 复选框单独使用时，也是用v-model来绑定一个布尔值。

 例如：


 
 选择状态：{{checked}}

在勾选时，数据checked的值改为了true，

组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数据当中，就会选中这一项。

 这一过程也是双向的，在勾选时，value的值也会自动push到这个数组中。

 实例代码如下：


 
 HTML
 

 
 JavaScript
 

 
 CSS
 

 
你选择的是：{{checked}}

当前状态下的结果如图6-3所示：

Vuejs中如何使用指令v-model完成表单的数据双向绑定

选择列表：

选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。
 先看一下单选的示例代码：


 
 
 JavaScript
 
 
 
你选择的是：{{selected}}

如果没有，就会直接匹配

 比如选中第二项时，selected的值为js，而不是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完成表单的数据双向绑定-创新互联
URL网址：http://xdwzjz.cn/article/dchsdp.html

其他资讯

Top