vue 实现折叠菜单芙蓉楼送辛渐

在 Vue 中实现折叠菜单，可以利用组件化思想来构建，比如使用 `v-if` 或者 `v-show` 来控制元素的显示隐藏，配合自定义指令或者计算属性来管理折叠状态。这里简单描述一下步骤：

1. 首先创建一个基础的折叠菜单组件，例如 `MenuItem.vue`，包含标题和展开/折叠的状态：

<template>
  <li class="menu-item">
    <span @click="toggleFold" :class="{ folded: isFolded }">{{ title }}</span>
    <transition name="fade">
      <div v-if="isFolded" class="menu-content">{{ content }}</div>
    </transition>
  </li>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      content: '',
      isFolded: true,
    };
  },
  methods: {
    toggleFold() {
      this.isFolded = !this.isFolded;
    },
  },
};
</script>

2. 然后在需要折叠菜单的地方引入并使用这个组件，例如在一个列表里：

<template>
  <ul>
    <MenuItem v-for="(item, index) in menuItems" :key="index" :title="item.title" :content="item.content"></MenuItem>
  </ul>
</template>

<script>
import MenuItem from './MenuItem.vue';

export default {
  components: {
    MenuItem,
  },
  data() {
    return {
      menuItems: [
        { title: '芙蓉楼', content: '送辛渐的内容...' },
        // 添加更多菜单项...
      ],
    };
  },
};
</script>

在这个例子中，用户点击标题时，该菜单项的内容就会折叠或展开。