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

实现排他效果的折叠

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

---

前言

提示：

一、实现流程

示例：

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

2： 判断展开折叠条件
基本的 v-if 即可

2. 写到这，大家基本都能实现一个基本的展开折叠，如图

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

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

至此，完结

总结

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