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>

Answer 2

使用toUpperCase()函数：

<input type="text" :value="name.toUpperCase()" @input="name = $event.target.value.toUpperCase()">

Answer 3

您正在尝试在<v-text-field>组件中添加v-model指令， v-text-field 确实支持v-model ，但是如果您使用value prop，您可以进行更多控制，您可以使用它作为<input>标签。 毕竟， v-model只是value和事件的组合。 所以你所要做的就是使用toUpperCase()函数。 因此，我想象的解决方案是：

<v-text-field type="text" :value="dto.toUpperCase()" @input="dto = $event.target.value.toUpperCase()">

Answer 4

最好的解决方案是使用 v-text-field 的掩码。 您可以指定任何您想要的内容，即对于西班牙的车牌，您可以输入：mask="####AAA" 它将把任何 CHAR 放在大写字母中。 更多信息在这里： https : //vuetifyjs.com/en/components/text-fields#

Answer 5

如果您还需要模型为大写，您可以像这样制作手表：

watch: {
  dto: function (val) {
     this.dto = val.toUpperCase();
  },
},

它对我有用，而且看起来更简单