vue中radio单选框如何实现取消选中状态问题
作者:qiandeqiande
这篇文章主要介绍了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>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。