vue实现鼠标移入动态展示导航栏二级菜单（异步）

在Vue中，可以通过监听鼠标移入事件来动态显示导航栏的二级菜单。以下是一个简单的示例，假设我们有一个异步获取二级菜单数据的场景：

<template>
  <div>
    <ul class="nav">
      <li v-for="item in menuItems" :key="item.id" @mouseenter="showSubmenu(item)">
        {{ item.name }}
        <ul v-if="item.showSubmenu" class="submenu">
          <li v-for="subitem in item.submenu" :key="subitem.id">{{ subitem.name }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      menuItems: [],
    };
  },
  methods: {
    async fetchMenuData() {
      // 示例异步获取菜单数据
      const menuData = await fetch('api/menu-data').then(res => res.json());
      this.menuItems = menuData.map(item => ({
        ...item,
        showSubmenu: false,
        submenu: [], // 初始化子菜单为空数组
      }));
    },
    async showSubmenu(item) {
      if (!item.submenu.length) {
        // 如果子菜单为空，则异步获取
        const submenuData = await fetch(`api/submenu-data?parentId=${item.id}`).then(res => res.json());
        item.submenu = submenuData; // 更新子菜单数据
      }
      item.showSubmenu = true; // 显示子菜单
    }
  },
  created() {
    this.fetchMenuData(); // 组件创建时获取菜单数据
  }
};
</script>
 
<style>
.submenu {
  display: none; /* 默认不显示子菜单 */
}
.nav li:hover .submenu {
  display: block; /* 鼠标移入导航项时显示子菜单 */
}
</style>

在这个例子中，我们有一个导航栏组件，其中包含一个menuItems数组来存储顶部菜单项。每个菜单项都可以有一个submenu属性，用于存储对应的二级菜单项。当鼠标移入顶部菜单项时，showSubmenu方法会被触发，该方法会检查是否已经获取了对应的二级菜单数据，如果没有，它会从API异步获取数据，然后更新菜单项的submenu属性，并设置showSubmenu为true以显示子菜单。CSS用于控制子菜单的显示，当鼠标悬停在顶部菜单项上时显示。