vue.js - 如何使文本左右对齐？

Question

我在 Vue 2 上，我正在使用 Vuetify 2.2.11。我有两个文本要放在 v-app-bar 中，一个应该在左边，另一个应该在右边。我该如何做到这一点？

我当前的代码：

<template>
  <v-app>
    <v-navigation-drawer app permanent color="#048ccc" clipped>
        <!-- Removed to simplify -->
    </v-navigation-drawer>

    <v-app-bar app clipped-left color="#005f9b" hide-on-scroll>
      LeftText-
      <div style="text-align:right">RightText</div>
    </v-app-bar>

    <div>
      <v-main>
        <div style="margin:1em">
          <router-view :key="$route.fullPath"></router-view>
        </div>
      </v-main>
    </div>
  </v-app>
</template>

我想要达到的目标：

我该怎么做呢？

标签： vue.jsvuetify.js

Answer 1

你可以v-spacer在它们之间添加一个

   <v-app-bar app clipped-left color="#005f9b" hide-on-scroll>
      LeftText-
      <v-spacer />
      <div style="text-align:right">RightText</div>
    </v-app-bar