vue鼠标移入菜单与上方显示子菜单

Vue.js中实现菜单项鼠标移入时显示子菜单通常会用到组件的`v-on`指令和CSS样式来处理交互效果。以下是简单的步骤：

1. **HTML结构**:
使用`<li>`标签代表菜单项，包含一个内部的`<ul>`标签作为子菜单。例如：

   <ul class="menu">
     <li v-for="(item, index) in menuItems" :key="index">
       <a @mouseenter="showSubmenu(item)" :href="item.url">{{ item.title }}</a>
       <ul v-if="isShowingSubmenu(index)" class="submenu">
         <li v-for="subitem in item.subitems" :key="subitem.id">{{ subitem.name }}</li>
       </ul>
     </li>
   </ul>

2. **JavaScript (使用Vue)**:
创建一个数据属性来跟踪当前激活的子菜单索引，并创建一个方法来控制显示隐藏：

   data() {
     return {
       isShowingSubmenu: new Array(this.menuItems.length).fill(false),
     };
   },
   
   methods: {
     showSubmenu(item) {
       this.isShowingSubmenu[item.index] = true;
     },
     hideSubmenu(itemIndex) {
       this.isShowingSubmenu[itemIndex] = false;
     },
   }

3. **CSS样式**:
添加一些基本的CSS来管理子菜单的显示和隐藏，比如使用`:hover`伪类：

   .submenu {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     z-index: 1;
   }

   .menu li:hover > ul.submenu {
     display: block;
   }

当用户将鼠标悬停在某个菜单项上时，`showSubmenu`方法会被调用，将对应位置的子菜单设置为显示。移开鼠标则可以通过`hideSubmenu`方法隐藏。