代码之家 › 专栏 › 技术社区 › Yore

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

vuetify.js vuejs2 javascript

Yore · 技术社区 · 6 年前

我正在尝试添加一个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>

如何实现文本字段的大写?谢谢。 /过去

3 回复 | 直到 6 年前

Sphinx 6 年前

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

.my-input input

附言: 在下面的示例中, 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>

li x 6 年前

使用 toUpperCase() 功能:

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

alexfertel 6 年前

您正在尝试添加 v-model 中的指令 <v-text-field> 组件,v-text-field不支持 ,但如果使用 value <input> 标签。毕竟 V-模型 价值 和一个事件。所以你要做的就是使用 toUpperCase()

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

Daniel Lombraña González 6 年前

最好的解决方案是使用v-text-field的掩码。您可以指定您想要的任何内容,例如,对于西班牙的车牌,您可以键入:mask=“#######AAA”,将任何字符放在大写字母中。更多信息请点击此处: https://vuetifyjs.com/en/components/text-fields#