vue多级列表实现手风琴实列

下面是一个简单的Vue多级列表实现手风琴的示例代码：

<template>
  <div class="accordion">
    <ul>
      <li v-for="(item, index) in items" :key="index" @click="toggle(index)">
        <div class="title">{{ item.title }}</div>
        <ul v-show="item.show">
          <li v-for="(subItem, subIndex) in item.children" :key="subIndex">{{ subItem }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          title: "Item 1",
          show: false,
          children: ["Subitem 1", "Subitem 2", "Subitem 3"]
        },
        {
          title: "Item 2",
          show: false,
          children: ["Subitem 1", "Subitem 2", "Subitem 3"]
        },
        {
          title: "Item 3",
          show: false,
          children: ["Subitem 1", "Subitem 2", "Subitem 3"]
        }
      ]
    };
  },
  methods: {
    toggle(index) {
      this.items[index].show = !this.items[index].show;
      this.items.forEach((item, i) => {
        if (i !== index) {
          item.show = false;
        }
      });
    }
  }
};
</script>

<style>
.accordion {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

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

li {
  cursor: pointer;
}

.title {
  background-color: #eee;
  padding: 10px;
  font-weight: bold;
}

ul ul {
  background-color: #f9f9f9;
  padding: 10px;
}
</style>

在这个示例中，我们使用了一个items数组来存储所有的列表项数据。每个列表项包括一个标题和一个子级菜单，子级菜单是一个字符串数组。我们使用v-for指令来遍历items数组，渲染每个列表项，并且使用v-show指令来控制子级菜单的显示和隐藏。

在toggle方法中，我们使用了一个简单的算法来实现手风琴效果。当用户点击某个列表项时，我们将该列表项的show属性设置为true，同时将其他列表项的show属性设置为false，这样就能保证只有一个子级菜单处于展开状态。

最后，我们还添加了一些基本的样式来美化手风琴效果。