用vue实现侧边栏手风琴效果

Vue是一个流行的JavaScript框架，可以用于构建Web应用程序。要实现侧边栏手风琴效果，可以使用Vue的transition组件来实现动画效果，以及vue-router来管理路由。

下面是一个简单的侧边栏手风琴效果的代码示例：

<template>
  <div class="sidebar">
    <ul>
      <li v-for="(item, index) in menuItems" :key="index" :class="{ active: activeIndex === index }" @click="toggleItem(index)">
        <div class="title">{{ item.title }}</div>
        <transition name="slide">
          <ul v-show="activeIndex === index">
            <li v-for="(subItem, subIndex) in item.subItems" :key="subIndex">{{ subItem }}</li>
          </ul>
        </transition>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { title: '菜单1', subItems: ['子菜单1', '子菜单2', '子菜单3'] },
        { title: '菜单2', subItems: ['子菜单4', '子菜单5', '子菜单6'] },
        { title: '菜单3', subItems: ['子菜单7', '子菜单8', '子菜单9'] },
      ],
      activeIndex: null,
    };
  },
  methods: {
    toggleItem(index) {
      if (this.activeIndex === index) {
        this.activeIndex = null;
      } else {
        this.activeIndex = index;
      }
    },
  },
};
</script>

<style scoped>
.sidebar {
  width: 200px;
}

.title {
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  border-bottom: 1px solid #ddd;
}

.active .title {
  background-color: #ddd;
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease-out;
}

.slide-enter,
.slide-leave-to {
  height: 0;
  overflow: hidden;
}
</style>

在这个示例中，我们使用了一个包含菜单项和子菜单项的数组来生成侧边栏。我们使用v-for指令来循环渲染每个菜单项，并使用v-show指令根据当前激活的索引来显示或隐藏子菜单项。我们还使用了Vue的transition组件来添加动画效果，并通过activeIndex来跟踪当前激活的菜单项。

希望这可以帮助您了解如何使用Vue实现侧边栏手风琴效果！