vue 实现排他效果的折叠最简单的方法

冷不防 2021-09-02 10:35 380阅读 0赞

# 实现排他效果的折叠 #

提示：本文通过最简单的方式实现最常用的折叠效果

### 文章目录 ###

*  实现排他效果的折叠
 *  前言
 *  一、实现流程
 *  总结

--------------------

# 前言 #

提示：

# 一、实现流程 #

示例：

1.  数据条件 ：第一次进入，都是处于折叠效果。所以当前点击索引在初始化的时候，就初始化成`空串`，如果想`默认展开第一项`，那你把当前点击索引`初始化`成`0` 即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]  
2： 判断展开折叠条件  
基本的 v-if 即可  
![在这里插入图片描述][20200918204322596.png_pic_center]  
2. 写到这，大家基本都能实现一个基本的展开折叠，如图

![在这里插入图片描述][20200918205227975.gif_pic_center]  
你会发现，是可以折叠了，因为判断的依据是当前点击的索引=== 循环的索引。但是会存在一个问题。当前索引和循环索引相等，导致已经是展开状态无法进行折叠。那该怎么办呢？  
及其原因是，`当前索引和循环索引相等` 所以会出现这个问题。解决的办法是，每次点击的时候，先判断`当前索引和循环索引相等` 如果相等，就清空当前点击的索引，然后重新赋值

showDetail(index) { 
          if (this.indexNow === index) { 
            this.indexNow = ''
          } else { 
            this.indexNow = index
          }
        },

![在这里插入图片描述][20200918205746252.gif_pic_center]

至此，完结

# 总结 #

提示：找问题，根据问题解决问题！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/62397347aa884aaf818c99e06cf83d30.png
[20200918204322596.png_pic_center]: /images/20210813/db19e454b1f64aa799d64e79df64e10a.png
[20200918205227975.gif_pic_center]: /images/20210813/dbbd5d8f203b42b68b72d27d6605c174.png
[20200918205746252.gif_pic_center]: /images/20210813/d97aa957483b4ca7a564ff4b315f98ec.png