vue radio单选框如何取消选中状态
客户需求
单选radio选中后，再次点击需要可以取消选择功能
页面有很组多单选，要实现一个方法就能兼容
话不多说直接上代码
1 2 3 4 | <span> <label>{{ item.name }}</label> </span> |
1 2 3 4 5 6 7 8 9 10 11 | //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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <title>test</title><div id="app"> <button>获取选中的值</button> </div>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，点击按钮时再统一去判断
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <title>test</title><div id="app"> <button>获取选中的值</button> </div>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) } }) } }}); |
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
