没有展开时没有展开时点击展开之后点击展开之后


9分钟前



10

10



















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;


}

}
}

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 循环多个标签，点击标签变色，再点击取消，可以同时点击多个补充知识：补充知识：vue 循环多个标签，点击标签变色，再点击取消，可以同时点击多个效果如下：1.


{{item}}



{{item}}
2.
.padding .relWarp .relFacility .relFacilityTitcon {


/* border: 1px solid red; */

/* line-height: 20px; */

padding: 0 .24rem;

font-size :10px;

}


.padding .relWarp .relFacility .relFacilityTitcon i {



/* height:20px; */

display: inline-block;

/* margin: 0 5px; */

height: 20px;

line-height: 20px;

padding: 0 .16rem;

/* width: auto; */

font-size: 10px;

color: #97979f;

border-radius: 5px;

border: 1px solid #97979f;

margin-right: 10px;

margin-top: 10px;

font-style: normal;


/* padding:1px 7px; */

/* display: inline-block; */

}

.padding .relWarp .relFacility .relFacilityTitcon .bgcolor {

border: 1px solid orange;

color: orange;

}


.padding .relWarp .relFacility .relFacilityTitcon i:last-child {

margin-right: 0;

}
.padding .relWarp .relFacility .relFacilityTitcon {


/* border: 1px solid red; */

/* line-height: 20px; */

padding: 0 .24rem;

font-size :10px;

}


.padding .relWarp .relFacility .relFacilityTitcon i {



/* height:20px; */

display: inline-block;

/* margin: 0 5px; */

height: 20px;

line-height: 20px;

padding: 0 .16rem;

/* width: auto; */

font-size: 10px;

color: #97979f;

border-radius: 5px;

border: 1px solid #97979f;

margin-right: 10px;

margin-top: 10px;

font-style: normal;


/* padding:1px 7px; */

/* display: inline-block; */

}

.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);

}

},
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循环中点击选中再点击取消(单选)的实现就是小编分享给大家的全部内容了，希望能给大家一个参考。