微客导航 » 文章资讯 » vue循环中点击选中再点击取消(单选)的实现

vue循环中点击选中再点击取消(单选)的实现

2023-07-16 22:31:03 297

没有展开时

点击展开之后


9分钟前

10
10

发表

data(){
return{
currentTab:-1,
flashreadlists:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
showcombtn:false,
comment:''
}
},
methods:{
change(){
if(this.comment.length>=1){
this.showcombtn=true
}else{
this.showcombtn=false
}
},
tocomment(index){
if(index!=this.currentTab){
this.currentTab=index;

}else{
this.currentTab=-1;

}
}
}

补充知识：vue循环多个标签，点击标签变色，再点击取消，可以同时点击多个

效果如下：


-1}">{{item}}

.padding.relWarp.relFacility.relFacilityTitcon{

/*border:1pxsolidred;*/
/*line-height:20px;*/
padding:0.24rem;
font-size:10px;
}

.padding.relWarp.relFacility.relFacilityTitconi{

/*height:20px;*/
display:inline-block;
/*margin:05px;*/
height:20px;
line-height:20px;
padding:0.16rem;
/*width:auto;*/
font-size:10px;
color:#97979f;
border-radius:5px;
border:1pxsolid#97979f;
margin-right:10px;
margin-top:10px;
font-style:normal;

/*padding:1px7px;*/
/*display:inline-block;*/
}
.padding.relWarp.relFacility.relFacilityTitcon.bgcolor{
border:1pxsolidorange;
color:orange;
}

.padding.relWarp.relFacility.relFacilityTitconi:last-child{
margin-right:0;
}

methods:{

changeSpan(index){
letarrIndex=this.spanIndex.indexOf(index);
//console.log(arrIndex);

if(arrIndex>-1){
this.spanIndex.splice(arrIndex,1);
}else{
this.spanIndex.push(index);
}
},

以上这篇vue循环中点击选中再点击取消(单选)的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue循环中点击选中再点击取消(单选)的实现

热门推荐

随机推荐