VUE.JS + Bootstrap - 如何在同一输入中大写第一个字母答案

【问题标题】：VUE.JS + Bootstrap - How to capitalize first letter in the same inputVUE.JS + Bootstrap - 如何在同一输入中大写第一个字母
【发布时间】：2020-07-02 12:25:00
【问题描述】：

我想在开始写作时输入输入，首字母大写。

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

如何进行输入以实时更改我的第一个字母？

【问题讨论】：

这实际上是他们在 vuejs 过滤器文档中给出的示例之一 :) vuejs.org/v2/guide/filters.html
它确实指定要在 v-bind 上使用它，你需要 2.1.0+

标签： vue.js vuejs2 bootstrap-vue

【解决方案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;
}

【讨论】：

太棒了！它运作良好newSurname,length 应该有点:) 它很有帮助。谢谢！
哦，是的，这是一个错字。伟大的。很高兴我帮助了 ;)
@Raffobaffo 如果已经输入了值并且您尝试更改第一个字母，即删除第一个字母，它将使第二个字母大写并在文本末尾移动光标，则会出现一个奇怪的问题如果输入文本，很难更新文本的第一个字母。

【解决方案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)
  }
}

【讨论】：