javascript - Vuetify 组件 v-text-field 没有上课

Question

我试图在 vuetify 中向 v-text-field 添加类，但是当它渲染到 dom 时，我意识到输入没有类。

   <v-text-field label="Login" class="upper" name="login" prepend-icon="person" type="text" v-model="usuario"></v-text-field>

我明白了:

<div class="v-input upper v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--is-booted">
<div class="v-input__prepend-outer">
<div class="v-input__icon v-input__icon--prepend">
<i aria-hidden="true" class="v-icon notranslate material-icons theme--light">person</i>
</div>
</div>
<div class="v-input__control">
<div class="v-input__slot">
<div class="v-text-field__slot">
<label for="input-10" class="v-label v-label--active theme--light" style="left: 0px; right: auto; position: absolute;">Login</label><input name="login" id="input-10" type="text"></div></div><div class="v-text-field__details">
<div class="v-messages theme--light">
<div class="v-messages__wrapper">
</div></div></div></div></div>

我想要输入框里的上层类。

Answer 1

CSS代码应用于<div class="v-input upper v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--is-booted">但需要应用于<input name="login" id="input-10" type="text">

将您的 CSS 代码更改为:

.upper input { 
text-transform: uppercase;
 }