Vuejs + Vuetifyjs + v-text-field 文本转换大写

Question

我正在尝试添加 v-text-input 并且我想要大写的文本（在 css: text-transform: uppercase 中）。我无法添加“类”，无法添加“样式”。我怎么做？我尝试过的事情：

 <v-text-field class="myUpperCase" v-model="dto" label="Username" required></v-text-field>
 <v-text-field style="text-transform: uppercase" v-model="dto" label="Username" required></v-text-field>

如何在文本字段上实现大写？谢谢。/昔时

Answer 1

因为v-text-field一次又一次用其他标签包装输入。如果打开浏览器检查器，结构将如下所示：

<div class="v-input my-input v-text-field v-input--is-label-active v-input--is-dirty">
  <div class="v-input__control">
    <div class="v-input__slot">
      <div class="v-text-field__slot"><input type="text"></div>
    </div>
    <div class="v-text-field__details">
      <div class="v-messages">
        <div class="v-messages__wrapper"></div>
      </div>
    </div>
  </div>
</div>

如果你想使用 css 来达到目标​​，你需要使用 css 选择器来应用你的样式，例如.my-input input：

PS：在下面的示例中，class=my-input放置在顶层，而不是输入元素处。您使用的第二种方法style="bla...bla.."也将在那里。

<div class="v-input my-input v-text-field v-input--is-label-active v-input--is-dirty">
  <div class="v-input__control">
    <div class="v-input__slot">
      <div class="v-text-field__slot"><input type="text"></div>
    </div>
    <div class="v-text-field__details">
      <div class="v-messages">
        <div class="v-messages__wrapper"></div>
      </div>
    </div>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    value: 'test abc'
  },
});

.my-input input{
  text-transform: uppercase
}