vue 实现简易卡包效果

最新推荐文章于 2025-06-24 09:11:00 发布

happyElina

最新推荐文章于 2025-06-24 09:11:00 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术总结文章标签：前端卡包

本文链接：https://blog.youkuaiyun.com/happyElina/article/details/102459967

本文介绍如何在Vue项目中实现简易卡包效果，即垂直堆叠元素中点击展开当前元素并收起其他元素。关键在于利用Vue的vue.set监听属性变化，结合模板和JS事件处理，以及LESS样式实现动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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>

js 部分主要是

1、获得 reservationList 列表，列表中每一项可以手动添加 ischecked 属性来控制类名，需要用vue.set 才可以被监听变化

2、点击卡片的事件