当前位置：首页 > VUE

vue实现列表展开收缩

2026-01-21 12:19:02VUE

Vue 实现列表展开收缩的方法

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

通过 Vue 的指令 v-show 或 v-if 可以动态控制列表项的显示与隐藏。v-show 通过 CSS 的 display 属性切换，适合频繁切换的场景；v-if 会销毁和重建 DOM 节点，适合不频繁切换的场景。

<template>
  <div>
    <button @click="toggleList">切换列表</button>
    <ul v-show="isExpanded">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ]
    };
  },
  methods: {
    toggleList() {
      this.isExpanded = !this.isExpanded;
    }
  }
};
</script>

使用动态 class 或 style 实现动画效果

结合 CSS 过渡或动画，可以为展开和收缩添加平滑效果。通过绑定动态 class 或 style 实现高度变化。

<template>
  <div>
    <button @click="toggleList">切换列表</button>
    <ul :class="{ 'expanded': isExpanded, 'collapsed': !isExpanded }">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ]
    };
  },
  methods: {
    toggleList() {
      this.isExpanded = !this.isExpanded;
    }
  }
};
</script>

<style>
.expanded {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
}

.collapsed {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}
</style>

使用第三方动画库（如 Vue Transition）

Vue 的 <transition> 组件可以更方便地实现动画效果，支持多种动画钩子。

<template>
  <div>
    <button @click="toggleList">切换列表</button>
    <transition name="slide">
      <ul v-show="isExpanded">
        <li v-for="item in items" :key="item.id">{{ item.name }}</li>
      </ul>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ]
    };
  },
  methods: {
    toggleList() {
      this.isExpanded = !this.isExpanded;
    }
  }
};
</script>

<style>
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.5s ease;
}

.slide-enter, .slide-leave-to {
  max-height: 0;
  overflow: hidden;
}

.slide-enter-to, .slide-leave {
  max-height: 500px;
}
</style>

使用组件封装实现复用

将展开收缩功能封装为可复用的组件，方便在多个地方调用。

<template>
  <div>
    <button @click="toggle">切换</button>
    <div ref="content" class="content">
      <slot></slot>
    </div>
  </div>
</template>

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

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

调用时只需传入列表内容即可：

<template>
  <expandable-list>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </expandable-list>
</template>

以上方法可以根据实际需求选择，灵活实现列表的展开与收缩功能。

vue实现列表展开收缩