javascript - 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.." 的第二种方法也将在那里。

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

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

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.1.14/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.1.14/dist/vuetify.min.js"></script>

<v-app id="app">
  <v-text-field class="my-input" :value="value">
  </v-text-field>
</v-app>