vue3侧边栏多级菜单
时间: 2023-10-22 17:08:47 浏览: 117
vue实现多级菜单效果
在 Vue 3 中实现侧边栏多级菜单可以通过嵌套子组件的方式来实现。下面是一个简单的示例代码:
```vue
<template>
<div>
<ul>
<li v-for="item in menuItems" :key="item.id">
<a href="#" @click="toggleSubMenu(item)">
{{ item.name }}
</a>
<ul v-if="item.showSubMenu">
<li v-for="subItem in item.subMenuItems" :key="subItem.id">
<a href="#">{{ subItem.name }}</a>
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
menuItems: [
{
id: 1,
name: 'Menu 1',
showSubMenu: false,
subMenuItems: [
{ id: 11, name: 'Sub Menu 1.1' },
{ id: 12, name: 'Sub Menu 1.2' },
{ id: 13, name: 'Sub Menu 1.3' }
]
},
{
id: 2,
name: 'Menu 2',
showSubMenu: false, subMenuItems: [
{ id: 21, name: 'Sub Menu 2.1' },
{ id: 22, name: 'Sub Menu 2.2' }
]
}
]
};
},
methods: {
toggleSubMenu(item) {
item.showSubMenu = !item.showSubMenu;
}
}
};
</script>
```
在上面的示例代码中,我们使用了一个 `menuItems` 数组来存储侧边栏的菜单项。每个菜单项包括一个 `showSubMenu` 属性来控制子菜单的显示和隐藏。通过点击菜单项,我们调用 `toggleSubMenu` 方法来切换子菜单的显示状态。
注意,这只是一个简单的示例,你可以根据自己的需求进行更复杂的实现。例如,可以使用递归组件来实现多级嵌套的菜单。另外,你还可以使用 Vue Router 来管理路由,以便在点击菜单项时进行页面跳转。
阅读全文