Vue项目里多级菜单动态展示及选中的实现方法

在Vue项目开发中，多级菜单的动态展示及选中功能是非常常见且重要的需求。它能够提升用户体验，使页面结构更加清晰，便于用户操作和导航。下面将介绍一种实现该功能的方法。

数据结构的设计是关键。我们需要创建一个包含多级菜单数据的数组，每个菜单项可以有子菜单，通过递归的方式来处理多级结构。例如：

const menuData = [
  {
    name: '菜单1',
    children: [
      {
        name: '子菜单1-1',
        children: []
      },
      {
        name: '子菜单1-2',
        children: []
      }
    ]
  },
  {
    name: '菜单2',
    children: []
  }
];

接下来，在Vue组件中，我们可以使用递归组件来动态渲染多级菜单。创建一个菜单组件，在组件的模板中使用v-for指令遍历菜单数据，并根据是否有子菜单来决定是否递归渲染子菜单。

<template>
  <ul>
    <li v-for="item in menuData" :key="item.name">
      {{ item.name }}
      <menu-component v-if="item.children.length > 0" :menuData="item.children"></menu-component>
    </li>
  </ul>
</template>

对于菜单的选中功能，我们可以通过绑定点击事件来实现。当用户点击某个菜单项时，触发一个方法，在该方法中更新一个变量来记录当前选中的菜单项。可以通过添加一个active类来突出显示选中的菜单项。

data() {
  return {
    activeMenu: null
  };
},
methods: {
  selectMenu(item) {
    this.activeMenu = item;
  }
}

在模板中，通过判断当前菜单项是否为选中状态来添加active类。

<li v-for="item in menuData" :key="item.name" :class="{ active: activeMenu === item }" @click="selectMenu(item)">

通过以上步骤，我们就可以在Vue项目中实现多级菜单的动态展示及选中功能。当然，实际应用中还可以根据需求进行进一步的优化和扩展，比如添加动画效果、权限控制等。