如何更改 vuetify 中的文本字段布局？

Question

我想更改文本字段的布局方式。我目前的标记是这样的：

我希望像这样重新设计布局：

到目前为止我的代码：

<template>
    <v-card
        max-width="1200"
        class="mx-auto"
    >
      <v-container
        class="pa-2"
        fluid
      >
        <v-form
            ref="form"
            v-model="valid"
            lazy-validation
        >
            <v-text-field
            v-model="name"
            :counter="10"
            :rules="nameRules"
            label="Name"
            required
            ></v-text-field>

            <v-text-field
            v-model="email"
            :rules="emailRules"
            label="E-mail"
            required
            ></v-text-field>
        </v-form>
      </v-container>
    </v-card>
</template>

结果如下：

我想把结果改成这样：

Answer 1

您可以使用outlined 属性使文本字段与边框一起显示。

见examples here