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

没有展开时

点击展开之后

      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}}

2.

.padding .relWarp .relFacility .relFacilityTitcon {
 
    
    
    padding: 0 .24rem;
    font-size :10px;
  }
 
  .padding .relWarp .relFacility .relFacilityTitcon i {
    
    
    display: inline-block;
    
    height: 20px;
    line-height: 20px;
    padding: 0 .16rem;
    
    font-size: 10px;
    color: #97979f;
    border-radius: 5px;
    border: 1px solid #97979f;
    margin-right: 10px;
    margin-top: 10px;
    font-style: normal;
 
    
    
  }
  .padding .relWarp .relFacility .relFacilityTitcon .bgcolor {
    border: 1px solid orange;
    color: orange;
  }
 
  .padding .relWarp .relFacility .relFacilityTitcon i:last-child {
    margin-right: 0;
  }

3.

 methods: {
      
      changeSpan(index){
 let arrIndex = this.spanIndex.indexOf(index);
 // console.log(arrIndex);
 
 if(arrIndex>-1){
   this.spanIndex.splice(arrIndex,1);
 }else{
   this.spanIndex.push(index);
 }
      },

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