vue 实现简易卡包效果

在项目中遇到了实现简易卡包效果的需求，需要在垂直堆叠元素中实现点击展开当前元素，收起其他元素的功能，思路是通过控制每一个堆叠元素的类名来实现，一下是核心实现代码

 

template：

   <div class="mine-top">
      <div class="my-card" v-for="(item,index) in reservationList" :key="index" 
        :class="[`card-${index}`,
        {'checkedAnimate':item.ischecked,'unCheckedAnimate':!item.ischecked},
        {'card-red':index%2!=1,'card-blue':index%2==1}]" @click="checkcard(index)">
        <div class="my-card-info">
          <div class="my-card_time">预约时段：{
  {item.days}} {
  {item.hours}}</div>
          <span class="order-status" :class="item.stsName"></span>
        </div>
      </div>
    </div>