vue3动态二级切换

Vue3中实现动态二级菜单切换通常涉及到组件化和数据驱动的概念。你可以使用`v-for`指令遍历数据源，构建一个多级路由菜单。下面是一个简单的步骤示例：

1. 定义数据结构：创建一个数组，每个元素代表一级菜单项，其中包含子菜单（也是一个数组）。

data() {
  return {
    menus: [
      { name: '一级菜单1', children: [{ name: '二级菜单1' }, { name: '二级菜单2' }] },
      { name: '一级菜单2', children: [{ name: '二级菜单3' }, { name: '二级菜单4' }] }
    ]
  };
}

2. 使用`<template>`渲染菜单：在模板中，可以使用递归的方式展示菜单，通过`v-if`控制是否显示子菜单。

<template>
  <ul>
    <li v-for="(item, index) in menus" :key="index">
      {{ item.name }}
      <ul v-if="item.children">
        <li v-for="(child, subIndex) in item.children" :key="subIndex">{{ child.name }}</li>
      </ul>
    </li>
  </ul>
</template>

3. 数据绑定与状态管理：当你的数据发生变化，例如从API获取到新的菜单层级时，只需要更新`menus`数据即可触发视图的重新渲染。

如果你需要更复杂的交互，如点击事件处理，可以在渲染的列表元素上添加`@click`监听器，然后通过事件去控制状态或导航。