html单选框name是数组吗,Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题...

Vue.js可以很方便的实现数据双向绑定，所以在处理表单，人机交互方面具有很大的优势。下面给大家介绍Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题。

摘要: 表单标签取值问题中，单选按钮、复选按钮和下拉列表都比较特殊。这里总结一下vue.js中关于单选按钮、复选按钮和下拉列表不同情况的取值特殊性问题。

表单标签取值问题中，单选按钮、复选按钮和下拉列表都比较特殊。这里总结一下vue.js中关于单选按钮、复选按钮和下拉列表不同情况的取值特殊性问题。

一、单选按钮

单选按钮：单选按钮用 v-model 绑定填值属性用来表示checked,用于判断是否选中。

当单选按钮没写value值时，在 vue.js 中将值赋为null。

在普通标签中，当没写name时,html 会默认将没写name 的单选按钮分为一组；

在vue中，即使没写name,只要单选按钮v-model绑定了同一个变量(如：gender)，这些按钮也会被分为一组。但是习惯上，我们还是也写上name。

在data中定义的变量gender的值将影响到单选按钮的默认选项，如： 本例子中gender:"女"，默认选择女。

js部分代码：

html部分代码：

属性用来表示checked,用于判断是否选中。

当单选按钮没写value值时，在vue中将值赋为null

在普通标签中，当没写name时,html 会默认将没写name 的单选按钮分为一组；

在vue中，即使没写name,只要单选按钮v-model绑定了同一个变量(如：gender)，这些按钮也会被分为一组。

但是习惯上，我们还是也写上name

在data中定义的变量gender的值将影响到单选按钮的默认选项，如： 本例子中gender:"女"，默认选择女。

dio" id="man" name="gender" value="男" v-model="gender">

dio" id="woman" name="gender" value="女" v-model="gender">