vue折叠面板怎么实现

我想做一个折叠面板

但是点击后变成这样了

怎么让他点击哪个就折叠哪个

这个使用elementUI或者ant design的菜单栏就可以实现。之所以点击姓名就变成这样，是因为你用了一个变量控制所有的展开，要对每个展开单独使用各自的变量控制。

在Vue中实现折叠面板可以使用v-if和v-show指令。

首先，你需要定义一个初始状态，表示当前折叠面板的状态是打开还是关闭。可以在data中定义一个布尔变量：

data() {
  return {
    isOpen: false
  }
}

然后，在HTML中，你可以使用v-if和v-show来控制折叠面板的状态。

使用v-if可以完全渲染或者不渲染一个DOM元素。可以通过点击一个按钮来切换折叠面板的状态：

<template>
  <div>
    <button @click="isOpen = !isOpen">Toggle</button>
    <div v-if="isOpen">
      <!-- 折叠面板内容 -->
    </div>
  </div>
</template>

使用v-show可以控制一个DOM元素的显示或隐藏：

<template>
  <div>
    <button @click="isOpen = !isOpen">Toggle</button>
    <div v-show="isOpen">
      <!-- 折叠面板内容 -->
    </div>
  </div>
</template>

在这个例子中，折叠面板的内容始终存在于DOM中，只是通过v-show控制它的显示或隐藏。