当前位置：首页 > VUE

vue实现展开收缩

2026-02-11 02:59:06VUE

Vue 实现展开收缩功能

在 Vue 中实现展开收缩功能可以通过多种方式完成，常见的方法包括使用 v-if、v-show 或动态 CSS 类。以下是几种实现方式：

使用 `v-show` 控制显示隐藏

v-show 通过切换元素的 display 属性实现展开和收缩，适合频繁切换的场景。

<template>
  <div>
    <button @click="toggle">Toggle Content</button>
    <div v-show="isExpanded">
      This content can be expanded or collapsed.
    </div>
  </div>
</template>

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

使用 `v-if` 条件渲染

v-if 会完全销毁或重新创建 DOM 元素，适合不频繁切换的场景。

<template>
  <div>
    <button @click="toggle">Toggle Content</button>
    <div v-if="isExpanded">
      This content is conditionally rendered.
    </div>
  </div>
</template>

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

使用 CSS 过渡动画

通过 Vue 的 <transition> 组件可以实现平滑的展开收缩动画效果。

<template>
  <div>
    <button @click="toggle">Toggle Content</button>
    <transition name="fade">
      <div v-show="isExpanded" class="content">
        This content has a fade animation.
      </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;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.content {
  padding: 10px;
  background: #f0f0f0;
}
</style>

使用动态高度动画

通过动态计算内容高度并应用 CSS 过渡，可以实现更自然的展开收缩效果。

<template>
  <div>
    <button @click="toggle">Toggle Content</button>
    <div 
      class="expandable" 
      :style="{ height: isExpanded ? contentHeight + 'px' : '0' }"
    >
      <div ref="content">
        This content has dynamic height animation.
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      contentHeight: 0
    };
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded;
      if (this.isExpanded) {
        this.$nextTick(() => {
          this.contentHeight = this.$refs.content.clientHeight;
        });
      }
    }
  }
};
</script>

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

使用第三方库（如 Vue-Collapse）

对于更复杂的需求，可以使用第三方库如 vue-collapse。

安装库：
```
npm install vue-collapse
```

使用示例：


<template>
<div>
 <button @click="toggle">Toggle Content</button>
 <vue-collapse :show="isExpanded">
   <div>
     This content is managed by vue-collapse.
   </div>
 </vue-collapse>
</div>
</template>

import { VueCollapse } from 'vue-collapse';

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

```

以上方法可以根据具体需求选择，v-show 和 v-if 适合简单场景，CSS 过渡和动态高度适合需要动画效果的场景，第三方库适合复杂交互需求。

vue实现展开收缩