gpt4 book ai didi

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

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 31 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue循环中点击选中再点击取消(单选)的实现由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

没有展开时 。

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 。

最后此篇关于vue循环中点击选中再点击取消(单选)的实现的文章就讲到这里了,如果你想了解更多关于vue循环中点击选中再点击取消(单选)的实现的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com