vue中radio单选框如何实现取消选中状态问题

目录

• vue radio单选框如何取消选中状态
• 客户需求
• 如何获取radio的选中值 、选中状态
• 方法1
• 方法2
• 总结

vue radio单选框如何取消选中状态

客户需求

单选radio选中后，再次点击需要可以取消选择功能

页面有很组多单选，要实现一个方法就能兼容   

话不多说直接上代码

                                                       {{ item.name }}                        

 //vue中radio单选框单击取消选中状态    chcekRadio ($event) {      let _this = this;      let objVal = _this.myData[$event.target.name];      window.setTimeout(() => {        if (!!objVal && objVal == $event.target.value) {          $event.target.checked = false          _this.myData[$event.target.name] = ''        }      }, 0);    },

如何获取radio的选中值 、选中状态

方法1

设置v-model

                                            获取选中的值    var vm = new Vue({  el:'#app',   data(){    return{      checkedValue:'',      list:[{value:1},{value:2},{value:3}]    }  },  methods:{    test(){      console.log('被选中的值为:'+this.checkedValue)    }  }});    

方法2

如果不想每次点击都判断，那就提供一个思路，定义一个radio数组list，每项设置一个isCheck标识，循环该数组渲染radio，点击按钮时再统一去判断

                                            获取选中的值    var vm = new Vue({  el:'#app',   data(){    return{      list:[{value:1,isCheck:false},{value:2,isCheck:false},{value:3,isCheck:false}]    }  },  methods:{    changeInput(index){      this.list.map((v,i)=>{         if(i==index){          v.isCheck = true        }else{          v.isCheck = false        }      })    },    test(){      this.list.map((v,i)=>{        if(v.isCheck){          console.log('被选中的值为:'+v.value)        }      })    }  }});    

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。