vue3实现折叠与展开组件

Vue 3 中实现折叠与展开组件可以使用 v-if 或 v-show 指令来控制元素的显示和隐藏。

方法1：使用 v-if 指令
在模板中使用 v-if 指令来判断是否显示折叠内容。当某个状态满足需要折叠时，对应的元素会被删除或添加到 DOM 中。

<template>
  <div>
    <button @click="toggleCollapse">折叠/展开</button>
    <div v-if="isCollapsed">
      <!-- 折叠内容 -->
    </div>
  </div>
</template>

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

方法2：使用 v-show 指令
与 v-if 指令不同的是，v-show 指令不会删除或添加 DOM 元素，而是通过 CSS 控制元素的显示和隐藏。使用 v-show 时，模板中的折叠内容始终存在于 DOM 中，只是通过设置 display 属性来控制其显示和隐藏。

<template>
  <div>
    <button @click="toggleCollapse">折叠/展开</button>
    <div v-show="isCollapsed">
      <!-- 折叠内容 -->
    </div>
  </div>
</template>

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

以上两种方法都可以用于实现折叠与展开组件。使用 v-if 指令可以在不需要展示的时候彻底删除 DOM 元素，适用于折叠内容较多且不经常切换状态的场景；而使用 v-show 指令则适用于折叠内容频繁切换展示状态的场景，因为元素始终存在于 DOM 中，不需要频繁创建和销毁。