当前位置：首页 > VUE

vue列表收缩展开实现

2026-02-25 08:33:49VUE

使用 `v-show` 指令实现展开/收缩

通过 v-show 控制元素的显示与隐藏，适合频繁切换的场景。
在 Vue 模板中绑定布尔值，点击按钮切换状态：

<template>
  <div>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开' }}
    </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: '项目1' },
        { id: 2, name: '项目2' }
      ]
    }
  }
}
</script>

使用 `v-if` 指令实现条件渲染

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

<template>
  <div>
    <button @click="toggleList">
      {{ showList ? '收起' : '展开' }}
    </button>
    <ul v-if="showList">
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showList: false,
      items: ['苹果', '香蕉', '橙子']
    }
  },
  methods: {
    toggleList() {
      this.showList = !this.showList
    }
  }
}
</script>

动态高度过渡动画

通过 CSS 过渡实现平滑的展开/收缩效果：

<template>
  <div>
    <button @click="toggle">切换</button>
    <div class="expandable" :style="{ height: expanded ? 'auto' : '0' }">
      <div class="content">
        <p>这里是可展开的内容</p>
      </div>
    </div>
  </div>
</template>

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

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

使用 Vue Transition 组件

利用 Vue 内置的 <transition> 实现更复杂的动画效果：

<template>
  <div>
    <button @click="show = !show">切换</button>
    <transition name="slide">
      <ul v-if="show" class="list">
        <li v-for="n in 5" :key="n">项目 {{ n }}</li>
      </ul>
    </transition>
  </div>
</template>

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

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter, .slide-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}
.list {
  margin-top: 10px;
}
</style>

多级嵌套列表展开

处理嵌套列表的展开/收缩功能：

<template>
  <div>
    <ul>
      <li v-for="category in categories" :key="category.id">
        <div @click="toggleCategory(category)">
          {{ category.name }}
          <span>[{{ category.expanded ? '-' : '+' }}]</span>
        </div>
        <ul v-show="category.expanded">
          <li v-for="item in category.items" :key="item">
            {{ item }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        {
          id: 1,
          name: '水果',
          expanded: false,
          items: ['苹果', '香蕉']
        },
        {
          id: 2,
          name: '蔬菜',
          expanded: false,
          items: ['胡萝卜', '西红柿']
        }
      ]
    }
  },
  methods: {
    toggleCategory(category) {
      category.expanded = !category.expanded
    }
  }
}
</script>

以上方法可根据实际需求选择或组合使用，v-show 适合频繁切换，v-if 适合条件渲染，过渡动画可提升用户体验。

vue列表收缩展开实现