概念说明

v型指令：在表单控件元素上创建双向数据绑定v型会根据控件类型自动选取正确的方法来更新元素。

输入框

实例中演示了投入和文本区域元素中使用v型实现双向数据绑定：

超文本标记语言

！DOCTYPE html html hearteta charset=' utf-8 ' title vue测试实例-菜鸟教程(runoob。com)/title脚本src=' http :https://cdn。bootscs。com/vue/2。2 .2/vue。量滴js '/script/headdydiv id=' app ' pinput元素：/p输入v-model=“消息”占位符='编辑我…' p消息是： {{ message }}/p ptextarea元素：/p p style='空白： pre"{ message 2 } }/p文本区域v-model=' message 2 '占位符='多行文本输入……/文本区/div脚本新Vue({ El : ' # app '，data: { message: 'Runoob '，message2: '菜鸟教程 r n http://www .鲁诺布。com ' } })/脚本/正文/html效果如图：

复选框

复选框如果是单个为逻辑值，如果是多个则绑定到同一个数组：

超文本标记语言

！DOCTYPE html html hearteta charset=' utf-8 ' title vue测试实例-菜鸟教程(runoob。com)/title脚本src=' http :https://cdn。bootscs。com/vue/2。2 .2/vue。量滴js '/script/headdydiv id=' app ' p单个复选框：/p输入类型=' checkbox ' id=' checkbox ' v-model=' checked '标签为='复选框“{选中} }/标签p多个复选框：/p输入类型='checkbox' id='runoob '值='Runoob' v-model='checkedNames '标签为=' runoob ' runoob/标签输入类型='checkbox' id='google '值='谷歌' v-model=' checked name '标签为='谷歌'谷歌/标签输入类型='复选框' id='淘宝'值='淘宝v-model=' checked name '标签为='淘宝'淘宝/标签br span选择的值为： { { checked names } }/span/divscriptnew Vue({ El : ' # app '，data: { checked : false，checked names 3360[]})/script/body/html效果如图：

单选按钮

HTML

！DOCTYPE html html hearteta charset=' utf-8 ' title vue测试实例-菜鸟教程(Runoob。com)/title脚本src=' http :https://cdn。bootscs。com/vue/2。2 .2/vue。量滴js '/script/head dydiv id=' app '输入类型='radio' id='runoob '值=' Runoob ' v-model=' pick '标签为='runoob'Runoob/label br输入类型='radio' id='google '值='谷歌' v型='精选'标签选中值为： { { pick } }/span/divscriptnew Vue({ El : ' # app '，data : { pick : ' Runoob ' } })/script/body/html效果如图：

下拉列表

HTML

！DOCTYPE html html hearteta charset=' utf-8 ' title vue测试实例-菜鸟教程(runoob。com)/title脚本src=' http :https://cdn。bootscs。com/vue/2。2 .2/vue。量滴js '/script/head dydiv id=' app '选择v-model='selected' name='水果'选项值=' '选择一个网站/option选项值='www.runoob.com'Runoob/option选项值=' www。谷歌。com ' Google/option/select div id=' output '选择的网站是： { {选定} }/div/div脚本新Vue({ El : ' # app '，数据： {选定： ' ' })/脚本/正文/html效果如图：

修饰符

.懒惰的

在默认情况下，v型在投入事件中同步输入框的值与数据，但你可以添加一个修饰符懒惰，从而转变为在变化事件中同步：

！-在"改变"而不是输入事件中更新-输入v-model.lazy='msg ' .数字

如果想自动将用户的输入值转为数字类型（如果原值的转换结果为圆盘烤饼则返回原值),可以添加一个修饰符数字给v型来处理输入值：

输入v型。number=' age ' type=' number '这通常很有用，因为在type='number '时超文本标记语言中输入的值也总是会返回字符串类型。整齐

如果要自动过滤用户输入的首尾空格，可以添加整齐修饰符到v型上过滤输入：

输入v-model.trim='msg '总结

以上所述是小编给大家介绍的Vue.js表单控件操作小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！