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

如果您需要存储大写的值，请使用带有 set 和 get 方法的计算属性：

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;
}