服务器之家

服务器之家 > 正文

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

时间:2021-09-24 15:31     来源/作者:Archer_yy

没有展开时

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

点击展开之后

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 循环多个标签,点击标签变色,再点击取消,可以同时点击多个

效果如下:

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

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部