vue中radio单选框如何实现取消选中状态问题
更新时间：2023年05月11日 15:24:25 作者：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> 总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了reactive readonly嵌套对象转换功能实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。这篇文章主要介绍了一文快速详解前端框架 Vue 最强大的功能,需要的朋友可以参考下2019-05-05
Vue3增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,对处理异步请求数据非常实用,下面这篇文章主要给大家介绍了关于Vue3中如何使用异步请求的相关资料,需要的朋友可以参考下2022-06-06
本篇文章给大家总结了Visual Studio Code断点调试Vue的方法以及心得分享，需要的朋友参考学习下。2018-02-02
Vue.js中vue-property-decorator的使用方法详解
vue-property-decorator是一个用于在Vue.js中使用TypeScript装饰器的库,它能够简化 Vue 组件的定义,使代码更加简洁和可维护,它能够简化Vue组件的定义,使代码更加简洁和可维护,本文将深入探讨vue-property-decorator的使用方法,并展示如何在Vue.js项目中应用它2024-08-08
这篇文章主要为大家详细介绍了vue-hook-form的使用方法，以及如何安装vue-hook-form，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章给大家介绍了vue实现表格动态嵌入折线图的绘制方法,文中有详细完整的代码示例攻大家参考,对大家的学习或工作有一定的参考价值,需要的朋友可以参考下2023-10-10
由于vue是一个双向数据绑定的框架,它的点击事件与以前常用的还是有很大的差别的,下面这篇文章主要给大家介绍了关于VUE3基础学习之click事件的相关资料,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了vue更改头像功能实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
Vue中router.beforeEach与beforeRouteEnter的区别及说明
这篇文章主要介绍了Vue中router.beforeEach与beforeRouteEnter的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论