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部分代码：

window.onload = function (){
 new Vue({
 el:"#app",
 data:{
  gender:"女"
 }
 });
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。