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

没有展开时

点击展开之后

1. <div class="flashread_item_box_time">
2. <span class="moment_time">9分钟前</span>
3. <div class="flashread_item_box_zan">
4. <span class="flashread_item_box_item"><i class="iconfont icon-changyongtubiao-mianxing-"></i>10</span>
5. <span class="flashread_item_box_item" @click="tocomment(index)"><i class="iconfont icon-pinglun" :class="{showcolor:currentTab==index}"></i>10</span>
6. </div>
7. </div>
8. <div class="comment_textareabox" :class="{'showcomment':currentTab==index}">
9. <div class="textarea_com">
10. <textarea placeholder="你来谈谈？" class="comment_textarea" v-on:input="change" v-model="comment"></textarea>
11. <button class="btn_comment" :class="{'showcolor':showcombtn}">发表</button>
12. </div>
13. </div>

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

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

效果如下：

1.

1. <div class="relFacilityTitcon">
2. <i v-for="(item,index) in facilityList" :key="index" @click="changeSpan(index);" :class="{'bgcolor':spanIndex.indexOf(index)>-1}" >{{item}}</i>
3. </div>

2.

1. .padding .relWarp .relFacility .relFacilityTitcon {
2.  
3. /* border: 1px solid red; */
4. /* line-height: 20px; */
5. padding: 0 .24rem;
6. font-size :10px;
7. }
8.  
9. .padding .relWarp .relFacility .relFacilityTitcon i {
10.  
11. /* height:20px; */
12. display: inline-block;
13. /* margin: 0 5px; */
14. height: 20px;
15. line-height: 20px;
16. padding: 0 .16rem;
17. /* width: auto; */
18. font-size: 10px;
19. color: #97979f;
20. border-radius: 5px;
21. border: 1px solid #97979f;
22. margin-right: 10px;
23. margin-top: 10px;
24. font-style: normal;
25.  
26. /* padding:1px 7px; */
27. /* display: inline-block; */
28. }
29. .padding .relWarp .relFacility .relFacilityTitcon .bgcolor {
30. border: 1px solid orange;
31. color: orange;
32. }
33.  
34. .padding .relWarp .relFacility .relFacilityTitcon i:last-child {
35. margin-right: 0;
36. }

3.

1. methods: {
2.  
3. changeSpan(index){
4. let arrIndex = this.spanIndex.indexOf(index);
5. // console.log(arrIndex);
6.  
7. if(arrIndex>-1){
8. this.spanIndex.splice(arrIndex,1);
9. }else{
10. this.spanIndex.push(index);
11. }
12. },

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

原文链接：https://blog.csdn.net/Dilemma_me/article/details/101543177