当前位置：首页 > VUE

vue div实现折叠效果

2026-02-24 20:01:39VUE

使用 Vue 实现折叠效果

通过 v-show 或 v-if 控制显隐

通过 Vue 的指令 v-show 或 v-if 可以简单实现折叠效果。v-show 通过 CSS 的 display 属性切换，v-if 会动态添加或移除 DOM 元素。

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">
      {{ isCollapsed ? '展开' : '折叠' }}
    </button>
    <div v-show="!isCollapsed">
      这里是需要折叠的内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    }
  }
}
</script>

添加过渡动画

使用 Vue 的 <transition> 组件可以为折叠效果添加平滑的动画。

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">
      {{ isCollapsed ? '展开' : '折叠' }}
    </button>
    <transition name="fade">
      <div v-show="!isCollapsed">
        这里是需要折叠的内容
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

动态高度过渡

如果需要实现高度变化的过渡效果，可以使用 max-height 结合 CSS 过渡。

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">
      {{ isCollapsed ? '展开' : '折叠' }}
    </button>
    <div class="collapse-content" :class="{ 'collapsed': isCollapsed }">
      这里是需要折叠的内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false
    }
  }
}
</script>

<style>
.collapse-content {
  max-height: 500px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.collapse-content.collapsed {
  max-height: 0;
}
</style>

使用第三方库

如果需要更复杂的折叠效果，可以借助第三方库如 vue-collapse 或 v-collapse。

安装 vue-collapse：

npm install vue-collapse

示例代码：

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">
      {{ isCollapsed ? '展开' : '折叠' }}
    </button>
    <vue-collapse v-model="isCollapsed">
      <div>
        这里是需要折叠的内容
      </div>
    </vue-collapse>
  </div>
</template>

<script>
import { VueCollapse } from 'vue-collapse'

export default {
  components: {
    VueCollapse
  },
  data() {
    return {
      isCollapsed: false
    }
  }
}
</script>