- 菜单项
menu: [
{ index: "1", title: "首页" },
{
index: "2",
title: "博客",
submenu: [{ itemIndex: "2-1", itemTitle: "消息" }],
},
{
index: "3",
title: "程序员学院",
},
{
index: "4",
title: "下载",
},
{
index: "5",
title: "论坛",
},
{
index: "6",
title: "问答",
},
{
index: "7",
title: "代码",
},
{
index: "8",
title: "直播",
},
{
index: "9",
title: "能力认证",
},
{
index: "10",
title: "高校",
},
],
- html代码
<v-container>
<v-app-bar>
<v-toolbar-title>
<v-img width="80" height="44" src="../assets/logo.png"></v-img>
</v-toolbar-title>
<v-toolbar-items>
<v-menu
v-for="(n, index) in menu"
:key="index"
open-on-hover
offset-y
>
<template v-slot:activator="{ on, attrs }">
<v-btn text v-bind="attrs" v-on="on"> {{ n.title }}</v-btn>
</template>
<v-list v-if="n.submenu">
<v-list-item
v-for="(item, index) in n.submenu"
:key="index"
@click="() => {}"
>
<v-list-item-title> {{ item.itemTitle }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-toolbar-items>
</v-app-bar>
</v-container>
- 实现效果如下
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210331150645189.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx,size_16,color_FFFFFF,t_70)