使用vuetify实现导航菜单

矫情吗；* 2021-07-25 18:08 1229阅读 0赞

1.  菜单项

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: "高校",
            },
          ],

1.  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>

1.  实现效果如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70]: /images/20210725/a1ef4f0846e94781865cab22aca76b05.png