vue实现展开收起列表

Vue 实现展开收起列表

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

通过 v-if 或 v-show 动态控制列表项的显示与隐藏。v-if 会销毁和重建 DOM 元素，适合切换频率较低的场景；v-show 通过 CSS 的 display 属性控制，适合频繁切换的场景。

<template>
  <div>
    <button @click="toggleList">展开/收起</button>
    <ul v-show="isExpanded">
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

使用 CSS 过渡动画

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

<template>
  <div>
    <button @click="toggleList">展开/收起</button>
    <transition name="slide">
      <ul v-show="isExpanded">
        <li v-for="item in list" :key="item.id">{{ item.name }}</li>
      </ul>
    </transition>
  </div>
</template>

<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>

动态计算高度

对于高度不确定的列表，可以通过 JavaScript 动态计算高度并应用动画。

<template>
  <div>
    <button @click="toggleList">展开/收起</button>
    <div ref="listContainer" :style="{ height: listHeight }">
      <ul>
        <li v-for="item in list" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
      listHeight: '0px',
    };
  },
  methods: {
    toggleList() {
      this.isExpanded = !this.isExpanded;
      if (this.isExpanded) {
        this.listHeight = `${this.$refs.listContainer.scrollHeight}px`;
      } else {
        this.listHeight = '0px';
      }
    },
  },
};
</script>

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

使用第三方库

对于更复杂的动画效果，可以借助第三方库如 vue-animate-height。

<template>
  <div>
    <button @click="toggleList">展开/收起</button>
    <vue-animate-height :duration="300" :height="height">
      <ul>
        <li v-for="item in list" :key="item.id">{{ item.name }}</li>
      </ul>
    </vue-animate-height>
  </div>
</template>

<script>
import VueAnimateHeight from 'vue-animate-height';
export default {
  components: { VueAnimateHeight },
  data() {
    return {
      isExpanded: false,
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
      ],
    };
  },
  computed: {
    height() {
      return this.isExpanded ? 'auto' : 0;
    },
  },
  methods: {
    toggleList() {
      this.isExpanded = !this.isExpanded;
    },
  },
};
</script>

以上方法可以根据实际需求选择，实现简单或复杂的展开收起效果。