当前位置：首页 > VUE

vue实现展开与收起

2026-01-12 04:33:20VUE

Vue 实现展开与收起功能

展开与收起是常见的交互需求，可以通过 Vue 的数据绑定和条件渲染轻松实现。以下是几种常见的实现方式：

方法一：使用 v-if 或 v-show 控制内容显示

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

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

方法二：使用 CSS 过渡动画

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

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

<style>
.content {
  overflow: hidden;
}
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.5s ease;
}
.slide-enter, .slide-leave-to {
  max-height: 0;
}
.slide-enter-to, .slide-leave {
  max-height: 500px; /* 根据内容调整 */
}
</style>

方法三：使用第三方库（如 Element UI）

<template>
  <div>
    <el-collapse>
      <el-collapse-item title="折叠面板">
        这里是需要展开收起的内容
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { ElCollapse, ElCollapseItem } from 'element-plus'

export default {
  components: {
    ElCollapse,
    ElCollapseItem
  }
}
</script>

方法四：多内容展开收起

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <button @click="toggleItem(index)">
        {{ expandedItems[index] ? '收起' : '展开' }}
      </button>
      <div v-show="expandedItems[index]">
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { content: '内容1' },
        { content: '内容2' },
        { content: '内容3' }
      ],
      expandedItems: []
    }
  },
  created() {
    this.expandedItems = this.items.map(() => false)
  },
  methods: {
    toggleItem(index) {
      this.$set(this.expandedItems, index, !this.expandedItems[index])
    }
  }
}
</script>

注意事项

性能考虑：对于大量内容，v-show 比 v-if 更合适，因为 v-show 只是切换 CSS 显示属性，而 v-if 会销毁和重建 DOM 节点
动画优化：使用 CSS 过渡时，建议使用 max-height 而非 height，因为内容高度可能不确定
可访问性：为按钮添加适当的 ARIA 属性，如 aria-expanded 和 aria-controls
组件封装：如果项目中多处需要展开收起功能，可以将其封装为可复用组件