Vue.js表单标签中单选按钮、检查按钮和下拉列表的值

Vue.js可以轻松实现双向数据绑定，因此在处理表单和人机交互方面有很大的优势。我们来介绍一下Vue.js表单标签中单选按钮、检查按钮和下拉列表的值。

摘要在：表格标签值问题中，单选按钮、复选按钮和下拉列表是比较特殊的。在这里，我们总结了vue.js中单选按钮、复选按钮和下拉列表的价值特殊性

单选按钮、检查按钮和下拉列表在表单标签值的问题上都是特殊的。在这里，我们总结了vue.js中单选按钮、复选按钮和下拉列表的价值特殊性

首先，单选按钮

单选按钮：单选按钮使用v型绑定填充属性表示选中，用于判断是否选中。

当单选按钮没有写入值时，在vue.js中将该值赋为null

普通标签中，不写名字时，html默认会将没有名字的单选按钮分成一组；

在vue中，即使没有写名字，只要单选按钮v-model绑定了相同的变量(比如性别)，这些按钮就会被分成一组。但传统上，我们还是写名字。

数据中定义的性别变量的值会影响单选按钮的默认选项，例如，本例中的性别：“女性”，默认选择女性。

部分js代码：

window . onload=function(){ new vue({ El : ' # app '，data: {gender3360 '女性' } })；} html部件代码：

body div id='app '！-单选按钮：单选按钮使用v-model绑定值属性表示选中，用于判断是否选中。当单选按钮不写入值时，该值在vue的普通标签中被赋为null。当没有写名字的时候，默认情况下html会把没有名字的单选按钮分成一组。在vue中，即使没有写名字，只要单选按钮v-model绑定了相同的变量(比如性别)，这些按钮就会被分成一组。但是传统上，我们仍然写名字

数据中定义的性别变量的值会影响单选按钮的默认选项，例如，本例中的性别：“女性”，默认选择女性。

-输入类型=' radio' id=' man ' name=' gender' value='男' v-model='gender '标签为=' man '男/Label输入类型=' radio ' id='女主' name=' gender ' value='女主' v-model=' gender '标签为='女主'女主/label /div/body II。检查按钮

检查按钮：单选按钮使用v-model绑定值属性表示选中，用于判断是否选中。

当多选按钮不写入该值时，在vue.js中将该值赋为null

vue.js for check按钮的值取决于v-model绑定的变量类型。

1.基本类型

初始化时，v-model绑定到任何基本类型(数字、字符串、布尔、空、未定义)，取值时将默认转换为布尔类型。true表示它已被选中，false表示它未被选中。

Js段代码：

window . onload=function(){ new Vue({ El : ' # app '，data: { hobbies01: ' '，hobbies02: ' . '，霍布斯03: false } })；}html段代码：

body div id='app '！-v-model绑定到基本类型-输入类型=' checkbox ' name=' affiliates ' id=' box01 '值='敲码' v-model=' hobbies01 '标签为=' box 01 '敲码/标签输入类型=' checkbox ' name=' affiliates ' id=' box02 '值='写码' v-model=' hobbies02 '标签为=' box 02 '写码/标签输入类型=' checkbox ' name=' affiliates ' id=' box 03 '值=' code '

初始化时，当空字符串转换为布尔类型时，霍布斯01值为假，因此不被选中；霍布斯02值是字符串“.”，转换为布尔类型时为真，因此默认情况下为选中状态；霍布斯03默认值为假，因此在初始化期间不会被选中。

此后，每次单击多选按钮时，hobbies01、hobbies02和hobbies03的值都为true | false。

2.排列

当v-model绑定的变量在初始化时为数组类型时。Vue认为这个检查按钮是用来取值的，会按照选择(鼠标点击)的顺序将对应的值写入数组。

Js代码片段：

window . onload=function(){ new Vue({ El : ' # app '，data:{霍布斯：[]} })；}html片段：

body div id='app '！-绑定v-model时的数组-输入类型=' checkbox ' name=' affiliates ' id=' box01 '值=' code knock ' v-model=' affiliates '标签为=' box01 ' code knock ' name=' affiliates ' id=' box02 '值=' write code ' v-model=' affiliates '标签为=' box02 '编写代码/标签输入类型=' checkbox ' name=' affiliates ' id=' box03 '值=' code ' v-model=' affiliates '标签

初始化时，爱好是一个空数组。注意鼠标点击顺序和爱好值的相应变化。

第三，下拉列表

下拉列表：下拉列表中的v-model写在下拉列表标签中的select标签中。

根据指定的值，选择相应的选项来添加选定的状态。

选项没有值属性，将选项的正标签和负标签中的值作为值。

3.1下拉列表

Js代码片段：

window . onload=function(){ new Vue({ El : ' # app '，data : { s : ' ' } })；}html片段：

body div id=' app ' select v-model=' s ' option value=' S1 '小学/option option value='s2 '中学/option /option option value='s3 '大学option it any=' it any ' value=' '请选择/option /select /div/body结果分析：

由于变量s的初始值为空字符串，请默认选择一个选项(默认选项可以根据s的初始值进行更改)。当选择其他选项时，s的值将会改变(字符串：“S1”/“S2”/“S3”)。

3.2值未写入

当没有写价值的时候，s的价值就会变成“小学”/“中学”/“大学”。

3.3多选下拉列表

多重关键字，按住ctrl键进行多重选择。请注意，此时模型绑定的变量应该是数组。

摘要

以上是边肖介绍的Vue.js表单标签中单选按钮、复选按钮、下拉列表的值。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！