vue中radio单选框如何实现取消选中状态问题
网络编程
vue radio单选框如何取消选中状态
客户需求
单选radio选中后，再次点击需要可以取消选择功能
页面有很组多单选，要实现一个方法就能兼容
话不多说直接上代码
<span v-for="item in radioData" :key="item.value"> <input type="radio" @click="chcekRadio($event)" name="abutmentVal" v-model="myData.abutmentVal" :id="'Abutment'+ item.id" :value="item.id" /> <label :for="'Abutment'+ item.id" :value="item.id">{{ item.name }}</label> </span> //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
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id='app'> <input type="radio" name="test" v-for="(item,index) in list" :value="item.value" v-model="checkedValue"> <button @click="test">获取选中的值</button> </div><script>var vm = new Vue({ el:'#app', data(){ return{ checkedValue:'', list:[{value:1},{value:2},{value:3}] } }, methods:{ test(){ console.log('被选中的值为:'+this.checkedValue) } }});</script></body> </html> 方法2
如果不想每次点击都判断，那就提供一个思路，定义一个radio数组list，每项设置一个isCheck标识，循环该数组渲染radio，点击按钮时再统一去判断
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id='app'> <input type="radio" name="test" v-for="(item,index) in list" :value="item.value" :checked="item.isCheck" @change="changeInput(index)"> <button @click="test">获取选中的值</button> </div><script>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) } }) } }});</script></body> </html> 总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
编辑：一起学习网
标签：状态,数组,方法,值为,单选