当前位置：首页 > VUE

vue展开收起功能实现

2026-01-20 18:32:15VUE

Vue 展开收起功能实现

使用 v-show 或 v-if 控制显示隐藏

通过 Vue 的指令 v-show 或 v-if 可以轻松实现展开收起功能。v-show 通过 CSS 的 display 属性控制元素显示隐藏，适合频繁切换的场景；v-if 会直接销毁和重建 DOM，适合不频繁切换的场景。

<template>
  <div>
    <button @click="toggle">点击{{ isExpanded ? '收起' : '展开' }}</button>
    <div v-show="isExpanded">
      这里是需要展开收起的内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false
    }
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

使用 transition 添加动画效果

通过 Vue 的 <transition> 组件可以为展开收起添加平滑的动画效果。

vue展开收起功能实现

<template>
  <div>
    <button @click="toggle">点击{{ isExpanded ? '收起' : '展开' }}</button>
    <transition name="fade">
      <div v-show="isExpanded">
        这里是需要展开收起的内容
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false
    }
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s, max-height 0.5s;
  max-height: 500px;
  overflow: hidden;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  max-height: 0;
}
</style>

使用第三方库如 vue-collapse

对于更复杂的展开收起需求，可以使用第三方库如 vue-collapse。安装后可以直接使用其提供的组件。

vue展开收起功能实现

npm install vue-collapse --save

<template>
  <div>
    <button @click="toggle">点击{{ isExpanded ? '收起' : '展开' }}</button>
    <vue-collapse v-model="isExpanded">
      <div>
        这里是需要展开收起的内容
      </div>
    </vue-collapse>
  </div>
</template>

<script>
import VueCollapse from 'vue-collapse'

export default {
  components: {
    VueCollapse
  },
  data() {
    return {
      isExpanded: false
    }
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

动态控制内容高度

通过动态绑定样式，可以实现内容高度的平滑过渡。

<template>
  <div>
    <button @click="toggle">点击{{ isExpanded ? '收起' : '展开' }}</button>
    <div :style="{ height: isExpanded ? 'auto' : '0', overflow: 'hidden', transition: 'height 0.5s' }">
      这里是需要展开收起的内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false
    }
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

使用 CSS 的 max-height 实现动画

通过设置 max-height 可以实现更平滑的展开收起动画，避免内容高度不确定的问题。

<template>
  <div>
    <button @click="toggle">点击{{ isExpanded ? '收起' : '展开' }}</button>
    <div class="content" :class="{ 'expanded': isExpanded }">
      这里是需要展开收起的内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false
    }
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

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

以上方法可以根据具体需求选择适合的方式实现展开收起功能。