当前位置：首页 > VUE

vue如何实现展开收起

2026-01-22 14:55:22VUE

Vue 实现展开收起功能的方法

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

通过 Vue 的指令 v-show 或 v-if 可以轻松实现展开收起功能。v-show 通过 CSS 的 display 属性控制显示，v-if 会动态添加或移除 DOM 元素。

<template>
  <div>
    <button @click="toggle">展开/收起</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">展开/收起</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;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用第三方组件库

如果需要更复杂的功能或样式，可以借助第三方组件库如 Element UI、Ant Design Vue 等。这些库通常提供了现成的展开收起组件。

vue如何实现展开收起

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

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

动态控制高度

通过动态改变元素的高度实现平滑的展开收起效果，适用于需要精确控制高度的场景。

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

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

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

使用 CSS 动画

通过纯 CSS 结合 Vue 的数据绑定，可以实现无 JavaScript 参与的展开收起效果。

<template>
  <div>
    <input type="checkbox" id="toggle" v-model="isExpanded" />
    <label for="toggle">展开/收起</label>
    <div class="content">
      这里是需要展开收起的内容
    </div>
  </div>
</template>

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

<style>
#toggle {
  display: none;
}
.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#toggle:checked + label + .content {
  max-height: 1000px;
}
</style>

以上方法可以根据具体需求选择适合的实现方式，灵活应用于不同的场景中。