当前位置：首页 > VUE

vue实现展开收起列表

2026-02-22 23:09:28VUE

实现展开收起列表的基本思路

在Vue中实现展开收起列表功能，可以通过控制数据的显示状态来实现。常见的做法是利用v-show或v-if指令结合点击事件切换显示状态。

使用v-show实现

v-show通过CSS的display属性控制元素的显示与隐藏，适合频繁切换的场景。

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

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

使用v-if实现

v-if会动态添加或移除DOM元素，适合不频繁切换的场景。

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

添加动画效果

通过Vue的过渡系统可以为展开收起添加动画效果，提升用户体验。

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

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

动态控制部分内容

如果需要动态控制列表中的部分内容，可以结合计算属性实现。

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

<script>
export default {
  data() {
    return {
      isExpanded: false,
      list: [
        { id: 1, text: '列表项1' },
        { id: 2, text: '列表项2' },
        { id: 3, text: '列表项3' }
      ]
    }
  },
  computed: {
    visibleList() {
      return this.isExpanded ? this.list : this.list.slice(0, 1);
    }
  },
  methods: {
    toggleList() {
      this.isExpanded = !this.isExpanded;
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用第三方库如vue-animate或vue-slide-up-down。

<template>
  <div>
    <button @click="toggleList">展开/收起</button>
    <vue-slide-up-down :active="isExpanded">
      <ul>
        <li v-for="item in list" :key="item.id">{{ item.text }}</li>
      </ul>
    </vue-slide-up-down>
  </div>
</template>

<script>
import VueSlideUpDown from 'vue-slide-up-down';

export default {
  components: {
    VueSlideUpDown
  },
  data() {
    return {
      isExpanded: false,
      list: [
        { id: 1, text: '列表项1' },
        { id: 2, text: '列表项2' },
        { id: 3, text: '列表项3' }
      ]
    }
  },
  methods: {
    toggleList() {
      this.isExpanded = !this.isExpanded;
    }
  }
}
</script>

vue实现展开收起列表