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

使用toUpperCase()函数：

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

Answer 2

因为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 3

您试图在update-database组件中添加v-model指令，v-text-field确实支持<v-text-field>，但是如果您使用{{ 1}}属性，可以用作v-model标签。毕竟，value只是<input>和事件的组合。因此，您要做的就是使用v-model函数。因此，我描述的解决方案是：

value

Answer 4

最好的解决方案是使用v文本字段的掩码。您可以指定任何内容，例如，对于西班牙的车牌，您可以输入：mask =“ #### AAA”，它将所有CHAR都用大写字母表示。此处更多信息：https://vuetifyjs.com/en/components/text-fields#

Answer 5

如果你也需要模型是大写的，你可以做一个这样的手表：

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

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

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

5 个答案: