VUE.JS + Bootstrap - 如何将同一输入中的第一个字母大写

Question

我想在开始写的时候输入首字母大写。

<b-form-input v-model="formSurname" id="Surname" name="Surname" placeholder="Surname" type="text" maxlength="50" required> </b-form-input>

我也过滤了这个。但是 v-model="formSurname | capitalize" 不起作用我试过 :value="formSurname | capitalize" 但它也不起作用

Vue.filter("capitalize", function (value) {
    if (!value) 
        return '';
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1);
});

如何输入实时更改首字母？

Answer 1

如果您需要存储大写的值，请使用带有设置和获取方法的计算属性 :

computed: {
 formSurnameCapital: {
    get: function () {
      return this.formSurname;
    },
    // setter
    set: function (newSurname) {
      if(newSurname.length < 1) {this.formSurname = ''; return}
      this.formSurname = newSurname.replace(/^./, newSurname[0].toUpperCase());
    }
  }
}

在您的模板中：

<b-form-input v-model="formSurnameCapital" id="Surname" name="Surname" placeholder="Surname" type="text" maxlength="50" required> </b-form-input>

否则，如果只是显示大写，你可以简单地使用 css :

.toCapitalFirst {
  text-transform: capitalize;
}

Answer 2

您可以在 methods

的 keyup 活动中更新 formSurname

<b-form-input v-model="formSurname" id="Surname" name="Surname" placeholder="Surname" type="text" maxlength="50" required @keyup="formatSurname"> </b-form-input>

在方法中：

formatSurname() {
  if (this.formSurname) {
    this.formSurname = this.formSurname.toString()
    this.formSurname = this.formSurname.charAt(0).toUpperCase() + this.formSurname.slice(1)
  }
}

VUE.JS + Bootstrap - 如何将同一输入中的第一个字母大写

VUE.JS + Bootstrap - How to capitalize first letter in the same input

vue.js

vuejs2

bootstrap-vue