微客导航 » 文章资讯 » vue radio单选框,获取当前项(每一项)的value值操作

vue radio单选框,获取当前项(每一项)的value值操作

2023-07-16 22:38:04 198

前言

本文使用了lable关联选中，实际使用中如果不需要，直接将循环语句v-for写在input标签上就可以

1、使用v-for循环的radio单选框

01）需要注意的是，这是使用的是change事件，而不是click点击事件

2、不使用v-for循环的radio单选框

01）需要注意的是，这是使用的是change事件，而不是click点击事件

点击每一项获得当前项的value值，使用v-for和不使用v-for实现的效果是一样的

这里就不分开写效果图了

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

补充知识：vue绑定单选框（radio）和复选框（CheckBox）

html部分


问卷调查

vue数据绑定

data(){
return{
radio2:'',
checkbox:[],
question:[
{
title:"1、请选择你的性别",
sex:[
'男','女'
]
},
{
title:"2、请选择你的爱好",
item:[
'打球','读书','画画','游泳','跑步'
]
}
],
};
},

js部分

//单选框radio选中值的改变
chooseSex(item){
this.radio2=item;
console.log("点击",item,"值",this.radio2);
},

//复选框checkbox多项选择后的值，及取消选中后的其他值
chooseHobbied(item){
if(box.indexOf(item)===-1){
box.push(item);
this.checkbox=box;
console.log("点击",item,"值",box);
}else{
box.splice(box.indexOf(item),1);
console.log("box值",box);
this.checkbox=box;
}
},

以上这篇vueradio单选框,获取当前项(每一项)的value值操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue radio单选框,获取当前项(每一项)的value值操作

热门推荐

随机推荐