vue鼠标移入在上方显示多个菜单

在Vue.js中，如果你想创建一个鼠标悬停时显示多个菜单的效果，通常会利用CSS的`:hover`伪类以及组件的状态管理来实现。你可以按照以下步骤操作：

1. **HTML结构**:
创建一个包含菜单列表的父元素，比如`<ul>`，并设置每个菜单项（例如`<li>`)为一个基础的Vue组件，添加一个`v-if`或`v-show`指令来控制其是否显示。

<ul class="menu">
  <li v-for="(item, index) in menuItems" :key="index">
    <span @mouseover="showMenu(index)" @mouseout="hideMenu(index)">
      {{ item.title }}
    </span>
    <!-- 使用v-if/v-show来切换菜单显示 -->
    <div v-if="isShowing[index]" class="submenu">
      <ul>
        <li v-for="subItem in item.subItems">{{ subItem }}</li>
      </ul>
    </div>
  </li>
</ul>

2. **Vue组件**:
在你的Vue组件里，定义状态变量`isShowing`初始化为一个全为`false`的对象，并且定义`showMenu`和`hideMenu`方法，分别在鼠标进入和离开时更新对应菜单的状态。

export default {
  data() {
    return {
      isShowing: { /* 初始化所有为 false */ },
      menuItems: [
        // ... 菜单项数据
      ],
    };
  },
  methods: {
    showMenu(index) {
      this.isShowing[index] = true;
    },
    hideMenu(index) {
      this.isShowing[index] = false;
    },
  },
};

3. **CSS样式**:
对`.menu li`、`.submenu`等选择器编写CSS，使得当`isShowing[index]`为`true`时，对应的`.submenu`显示出来，移除鼠标后隐藏。

.menu li:hover .submenu {
  display: block; /* 或者flex: 1; 或者其他显示方式 */
}

.menu li:not(:hover) .submenu {
  display: none;
}