当前位置：首页 > VUE

vue实现列表收缩展开

2026-02-23 20:46:52VUE

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

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

使用v-show实现

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

<template>
  <div>
    <button @click="toggleList">Toggle List</button>
    <ul v-show="isVisible">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

使用v-if实现

v-if会直接销毁或重建DOM元素，适合不频繁切换的场景。

<template>
  <div>
    <button @click="toggleList">Toggle List</button>
    <ul v-if="isVisible">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

动态切换类名实现动画效果

结合CSS过渡或动画，可以为列表的展开收缩添加平滑效果。

<template>
  <div>
    <button @click="toggleList">Toggle List</button>
    <ul :class="{ 'collapsed': !isVisible }">
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<style>
ul {
  transition: max-height 0.3s ease;
  max-height: 500px;
  overflow: hidden;
}
ul.collapsed {
  max-height: 0;
}
</style>

嵌套列表的递归组件实现

对于多级嵌套列表，可以使用递归组件实现逐级展开收缩。

<template>
  <div>
    <tree-node :node="treeData"></tree-node>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: {
        name: 'Root',
        children: [
          {
            name: 'Child 1',
            children: [{ name: 'Grandchild 1' }]
          },
          { name: 'Child 2' }
        ]
      }
    }
  },
  components: {
    TreeNode: {
      props: ['node'],
      template: `
        <div>
          <div @click="toggle">
            {{ node.name }}
          </div>
          <div v-show="isOpen" v-if="node.children">
            <tree-node
              v-for="child in node.children"
              :key="child.name"
              :node="child"
            ></tree-node>
          </div>
        </div>
      `,
      data() {
        return { isOpen: false }
      },
      methods: {
        toggle() {
          this.isOpen = !this.isOpen
        }
      }
    }
  }
}
</script>

使用第三方库

如果需要更复杂的功能，可以考虑使用第三方库如vue-accordion或vue-collapse。

vue实现列表收缩展开

npm install vue-accordion

<template>
  <vue-accordion>
    <vue-accordion-item v-for="item in items" :key="item.id">
      <template slot="title">{{ item.title }}</template>
      <template slot="content">{{ item.content }}</template>
    </vue-accordion-item>
  </vue-accordion>
</template>

<script>
import { VueAccordion, VueAccordionItem } from 'vue-accordion'
export default {
  components: { VueAccordion, VueAccordionItem },
  data() {
    return {
      items: [
        { id: 1, title: 'Title 1', content: 'Content 1' },
        { id: 2, title: 'Title 2', content: 'Content 2' }
      ]
    }
  }
}
</script>