服务器之家

服务器之家 > 正文

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

时间:2021-09-24 15:34     来源/作者:好巧.

前言

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

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

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

  1. <template>
  2. <div>
  3. <label v-for="(item, index) in radioData" :key="index">
  4. <input
  5. type="radio"
  6. v-model="radioVal"
  7. :value="item.value"
  8. @change="getRadioVal"
  9. />
  10. {{ item.value }}
  11. </label>
  12. </div>
  13. </template>
  14.  
  15. <script>
  16. export default {
  17. data() {
  18. return {
  19. radioData: [
  20. { value: '全部' },
  21. { value: '部分' },
  22. { value: '零散' }
  23. ],
  24. radioVal: '全部' // 用于设置默认选中项
  25. };
  26. },
  27. methods: {
  28. getRadioVal() {
  29. console.log(this.radioVal);
  30. }
  31. }
  32. };
  33. </script>

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

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

  1. <template>
  2. <div>
  3. <label><input v-model="radioVal" type="radio" value="全部" @change="getRadioVal">全部</label>
  4. <label><input v-model="radioVal" type="radio" value="部分" @change="getRadioVal">部分</label>
  5. <label><input v-model="radioVal" type="radio" value="零散" @change="getRadioVal">零散</label>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. radioVal: '全部' // 用于设置默认选中项
  13. };
  14. },
  15. methods: {
  16. getRadioVal() {
  17. console.log(this.radioVal);
  18. }
  19. }
  20. };
  21. </script>

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

这里就不分开写效果图了

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

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

补充知识:vue绑定单选框(radio)和复选框(CheckBox)

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

html部分

  1. <div style="width:500px;margin:50px auto;display:flex;flex-direction:column;">
  2. <div style="font-weight:600;font-size:18px">问卷调查</div>
  3.  
  4. <div v-for="(item,index) in question" :key="index" style="padding-top:10px">
  5. <div style="margin-bottom:10px">{{item.title}}</div>
  6. <div v-if="item.sex" style="display:flex;align-items:center;">
  7.  
  8. <div v-for="(item2,index2) in item.sex" :key="index2" @click="chooseSex(item2)" style="margin-right:20px">
  9. <input type="radio" :value="item2" v-model="radio2"> <span> {{item2}}</span>
  10. </div>
  11. </div>
  12.  
  13. <div v-if="item.item" style="display:flex;align-items:center;">
  14. <div v-for="(item3,index3) in item.item" :key="index3" @click="chooseHobbied(item3)" style="margin-right:20px">
  15. <input type="checkbox" :value="item3" v-model="checkbox"><span> {{item3}}</span>
  16. </div>
  17. </div>
  18. </div>
  19. </div>

vue数据绑定

  1. data() {
  2. return {
  3. radio2:'',
  4. checkbox:[],
  5. question:[
  6. {
  7. title:"1、请选择你的性别",
  8. sex:[
  9. '男','女'
  10. ]
  11. },
  12. {
  13. title:"2、请选择你的爱好",
  14. item:[
  15. '打球','读书','画画','游泳','跑步'
  16. ]
  17. }
  18. ],
  19. };
  20. },

js部分

  1. //单选框radio选中值的改变
  2. chooseSex(item){
  3. this.radio2 = item;
  4. console.log("点击",item,"值",this.radio2);
  5. },
  6.  
  7. //复选框checkbox多项选择后的值,及取消选中后的其他值
  8. chooseHobbied(item){
  9. if(box.indexOf(item) === -1){
  10. box.push(item);
  11. this.checkbox = box;
  12. console.log("点击",item,"值",box);
  13. }else{
  14. box.splice(box.indexOf(item),1);
  15. console.log("box值",box);
  16. this.checkbox = box;
  17. }
  18. },

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

原文链接:https://blog.csdn.net/weixin_43233914/article/details/85237658

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部