vue radio单选框如何取消选中状态
客户需求
单选radio选中后，再次点击需要可以取消选择功能
页面有很组多单选，要实现一个方法就能兼容
话不多说直接上代码
//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
test
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，点击按钮时再统一去判断
test
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俱乐部。
