时间戳

首页 > 解决方案 > Vuetify 文本字段标签对齐

vue.js - Vuetify 文本字段标签对齐

问题描述

我正在为网络应用程序构建一个简单的注册页面。我正在使用 vuetify 组件来构建页面。我有两个用于获取用户名和密码的文本字段。文本字段的标签显示在文本字段的右侧。知道如何让标签出现在文本字段的左侧

我尝试添加自定义 css 此类类来覆盖对齐，但我无法获得预期的结果。这是没有自定义类的 HTML：

<template>
  <v-container>
    <v-card>
      <v-toolbar flat dense class="black" dark>
        <v-toolbar-title>Register</v-toolbar-title>
      </v-toolbar>
      <v-card-text>
        <v-text-field
          type="email"
          name="email"
          label="email"
          class="left-align"
          v-model="email"/>
        <v-text-field
          type="password"
          name="password"
          label="password"
          class="left-align"
          v-model="password"/>
        <br>
        <div class="error" v-html="error"/>
      </v-card-text>
      <v-card-actions>
          <v-btn class = "black" v-on:click="register" >Register</v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

这是界面的图片

标签： vue.jsvuetify.js

解决方案

尝试使用reverse道具

<v-text-field
reverse
type="email"
name="email"
label="email"
class="left-align"
v-model="email"/>

推荐阅读