当前位置：首页 > VUE

vue 实现展开收起

2026-02-20 12:30:14VUE

实现展开收起功能的方法

在Vue中实现展开收起功能可以通过多种方式完成，以下介绍几种常见的方法：

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

通过Vue的指令v-show或v-if可以轻松实现内容的展开和收起。v-show通过CSS的display属性控制元素显示，而v-if会完全移除或重新渲染DOM元素。

vue 实现展开收起

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

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

使用CSS过渡效果

如果需要平滑的展开收起动画效果，可以结合Vue的过渡系统和CSS的max-height属性。

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

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

<style>
.content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
}

.expand-enter-active, .expand-leave-active {
  max-height: 500px;
  transition: max-height 0.3s ease-in;
}
</style>

使用第三方组件库

许多Vue UI组件库如Element UI、Ant Design Vue等提供了现成的展开收起组件。

vue 实现展开收起

以Element UI为例：

<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item title="标题" name="1">
      这里是需要展开收起的内容
    </el-collapse-item>
  </el-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: ['1']
    }
  }
}
</script>

动态计算内容高度

对于需要精确控制高度的场景，可以通过计算内容高度来实现。

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

<script>
export default {
  data() {
    return {
      isExpanded: false,
      contentHeight: '0px'
    }
  },
  methods: {
    toggle() {
      if (this.isExpanded) {
        this.contentHeight = '0px'
      } else {
        this.contentHeight = `${this.$refs.content.scrollHeight}px`
      }
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

<style>
.content {
  overflow: hidden;
  transition: height 0.3s ease;
}
</style>

以上方法可以根据具体需求选择使用，简单的显示隐藏推荐第一种方法，需要动画效果推荐第二种或第四种方法，快速开发可以考虑使用第三方组件库。

标签: vue