使用 Vuetify.js 的右上角菜单答案

【问题标题】：Top right menu using Vuetify.js使用 Vuetify.js 的右上角菜单
【发布时间】：2020-11-18 09:20:47
【问题描述】：

我刚开始学习vue。我想使用 Vuetify 创建一个水平右上角的菜单。

但我已经记下了垂直菜单。 Vuetify 文档中没有这样的示例。最常用的菜单没有确切的实现。如何将其配置为水平？
这是模板

<v-app>
  <v-app-bar
    app
    color="primary"
    light
  >
    <v-navigation-drawer
      v-model="drawer"
      right
      width="500"
    >
      <v-list
        nav
        dense
        max-width="240"
      >
        <v-list-item-group>
          <v-list-item>
            <v-list-item-title>Log in</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-title>Sign in</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>

    <v-spacer />
  </v-app-bar>
</v-app>

【问题讨论】：

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

如果你想创建一个栏，其中一些项目在右侧水平对齐，你可以这样做：

<v-app-bar color="deep-purple accent-4" dense dark>

        <v-spacer></v-spacer>

        <v-btn text>
          Log in
        </v-btn>
        <v-btn text>
          Sign in
        </v-btn>
</v-app-bar>

LIVE DEMO

【讨论】：