Vuejs学习笔记的教学v型完成表单的数据双向绑定

表单类控件承载网页的数据输入和交互。本章将介绍如何使用指令v-model完成表单的数据双向绑定。

6.1 基本用法

表单控件在实际业务中比较常见，如单选、多选、下拉选择、输入框等。它们可用于完成数据输入、验证和提交。Vue.js提供了一个v-model指令，用于在表单类元素上双向绑定数据。例如，在输入框中使用时，输入内容将实时映射到绑定数据。

例如，以下示例：

Div id=' app '输入类型=' text' v-model=' message '占位符='请输入.'pt输入内容为：{{message}}/p/div script var app=new vue({ El : ' # app '，data: {message3360') /script在输入框中输入，{ { message } }将在视图中实时呈现内容。

如图6-1所示：

文本字段textarea也是如此：

div id=' app ' text area v-model=' text '占位符='请输入.'/text areaP输入的内容是：/p p style=' white-space 3360 pre；'{ { text } }/p/div script var app=new Vue({ El : ' # app '，data : { text : ' ' })；/script提示：

提示v-model后，窗体控件显示的值只依赖于绑定的数据，初始化时不再关心value属性，textarea/textarea之间插入的值不会生效。使用v-model时，如果用中文输入法输入中文，Vue在选择短语前，也就是拼音阶段不会更新数据，只会在输入汉字时触发创新。如果想一直实时更新，可以用@input代替v-model。事实上，v-model也是一种特殊的语法糖，只是它可以在不同的表单上进行智能处理。例如，以下示例：div id=' app '输入类型=' text' @ input=' handleinput '占位符='请输入.'p输入内容为：{{message}}/p/div脚本var app=newvue ({el:' # app '，data: { message: '' }，methods : { handleinput 3360 function(event){ this . message=event . target . value；} } });/script查看更多表单控件。

单选按钮：

单选按钮单独使用时，不需要v-model，直接使用v-bind绑定一个布尔值。如果为真，则选中，如果为假，则不选中。例如：

Div id=' app '输入类型=' radio' :选中=' picked '标签单选按钮/标签/div脚本var app=newvue ({el:' # app '，data : { picked 3360 true } })；如果/script组合使用，达到互斥选择的效果，需要v-model和value来使用：

div id='app '输入类型='radio' v-model='picked '值='html' id='html '标签为='html'HTML/标签输入类型='radio' v-model='picked '值='js' id='js '标签为='js'JavaScript/Label输入类型=' radio' v-model=' picked '值=' CSS' id=' CSS '标签为=' CSS ' CSS ' CSS/Label pWhat您选择的是：{{picked}如图6-2所示：

复选框：

复选框也可以单独或组合使用，但用法与单个选择略有不同。

当复选框单独使用时，v-model也用于绑定布尔值。

例如：

Div id=' app '输入类型=' checkbox ' v-model=' checked ' id=' checked '标签为=' checked '选择状态：{{checked}}/label/div脚本var app=newvue ({el:' # app '，data: {checked。选中/script时，选中的数据值将更改为true，并且将更新标签中呈现的内容。

组合使用时，也是v-model和值，多个复选框绑定到同一数组类型的数据。如果值在数据中，将选择此项。

这个过程也是双向的。选中后，值的值将自动推入该数组。

示例代码如下：

div id='app '输入类型='checkbox' v-model='checked '值='html' id='html '标签为='html'HTML/label br输入类型='checkbox' v-model='checked '值='js' id='js '标签为='js'JavaScript/Label br输入类型=' checkbox' v-model=' checked '值=' CSS' id=' CSS '标签为=' CSS ' CSS ' CSS/Label br p您选择的是：{ }/script当前状态的结果如图6-3所示：

选择列表：

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

div id=' app ' select v-model=' selected ' option html/option value=' js ' JavaScript/option option CSS/option/select p您选择的是：{ { selected } }/p/div script var app=new Vue({ El : ' # app '，data : { selected : ' html ' })；/scriptoption是一个替代选项。如果包含value属性，v-model将优先匹配value的值；

如果没有，它将直接匹配选项的文本。

例如，当选择第二个项目时，选择的值是js而不是JavaScript。

添加属性multiple进行选择，可以多选。此时，v-model绑定到一个数组，这类似于复选框的用法。示例代码如下：

div id=' app ' select v-model=' selected ' multiple option html/option value=' js ' JavaScript/option option CSS/option/select p您选择的是：{ { selected } }/p/div script var app=new Vue({ El : ' # app '，data: { selected: ['html '，' js ']})；/script在业务中，option经常用v-for动态输出，value和text也用v-bind动态输出。例如：

Div id=' app '选择v-model=' selected '选项v-for=' options ' : value=' item '中的项目。值“{item。text}}/option/select p您选择的是：{ { selected } }/p/div script var app=new Vue({ El : ' # app '，data : { options :[{ text : ' HTML '，value:'html'}，{text:'JavaScript '，value:'js'}，{text:'CSS '，value: ' css ' }，]/script虽然可以利用选择列表的select控件简单满足下拉选择的要求，但在实际业务中并不常用，因为它的风格依赖于平台和浏览器，不统一，不美观，功能有限。例如，它不支持搜索，所以一个常见的解决方案是使用divmoi作为类似的控件。

阅读完第7章中的组件后，您可以尝试编写一个下拉选择器的通用组件。

6.2 绑定值

上一节描述的单选按钮、复选框和选择列表单独使用或在单个单选模式下使用，v-model绑定的值是静态字符串或布尔值。但是在业务中，有时需要绑定一个动态数据，这可以通过v-bind来实现。

单选按钮：

Div id=' app '输入类型=' radio ' v-model=' picked ' : value=' value '标签单选按钮/标签p { { picked } }/p p { { value } }/p/div script var app=new Vue({ El : ' # app '，data: { picked: false，value : 123 } })；/script选中时，app . pick===app . value，值都是123。

复选框：

Div id=' app '输入类型=' checkbox ' v-model=' toggle ' : true-value=' value 1 ' : false-value=' value 2 '标签复选框/标签p { { toggle } }/p { { value 1 } }/p { { value 2 } }/p/div script var app=new Vue({ El : ' # app '，data: { toggle: false，value1: 'a '，选中/script时，应用程序。切换===应用程序。value1

未选中时，app.toggle===app.value2。

选择列表：

div id=' app ' select v-model=' selected ' option : value=' { number :123 } ' 123/option/select { { selected . number } }/div script var app=new Vue({ El : ' # app '，data : { selected : ' ' })；当选择/script时，app.selected是一个对象，因此app.selected.number===123。

6.3 修饰符

类似于事件修改器，v-model也有修改器来控制数据同步的时序。懒惰：

在输入框中，默认情况下，v-model会在输入事件中同步输入框的数据(除了提示中介绍的中文输入法)。

使用修饰语。lazy将在change事件中更改为同步，示例代码如下：

div id='app '输入类型=' text ' v-model . lazy=' message ' p { { message } }/p/div script var app=new Vue({ El : ' # app '，data : { message : ' ' })；/script这是，消息不会实时更改，但会在失焦或按enter时更新。号码：

使用修饰语。Number将输入转换为数字类型，否则，虽然您输入了一个数字，但其类型实际上是String。例如，它在数字输入框中会很有用。示例代码如下：

div id='app '输入类型=' number ' v-model . number=' message ' p { { type of message } }/p/div script var app=new Vue({ El : ' # app '，data : { message : 123 } })；/script.trim:

修饰语。trim可以自动过滤输入的前导和尾随空格。示例代码如下：

div id='app '输入类型=' text ' v-model . trim=' message ' p { { message } }/p/div script var app=new Vue({ El : ' # app '，data : { message : ' ' })；/script从Vue.js 2.x开始，v-model还可以用来定制组件以满足定制需求，这将在下一节中介绍。

以上是边肖介绍的完成表单双向数据绑定的Vuejs学习笔记的指令v-model。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！