在 Vue.js 中将输入转换为大写答案

【问题标题】：Convert input to uppercase in Vue.js在 Vue.js 中将输入转换为大写
【发布时间】：2022-01-24 09:12:24
【问题描述】：

我需要将模型user.full_name的输入数据大写。如果可能的话，应该只用拉丁字母书写

Vue js 大写

<p-input :value="value" @input="$emit('input', $event)" />

 <UIFormInput
          v-model="user.full_name "
          class="w-full"
          label="Full name"
 />

我有很多意见。我需要将其中一些大写。更准确地说，模型是 user.full_name。所以我需要帮助

【问题讨论】：

你能分享一下，你已经尝试过专门将输入大写吗？
感谢您的回答。但我不能再次将其他包添加到我的项目中。它对我们的服务器的艰难过程。所以我只需要将此问题编码为 v-model:user.full_name。我如何编写代码？？
你可以像这样删除变音符号：stackoverflow.com/a/37511463/7451109
不确定这里的 +1 套餐会有什么不同。它如何将您的流程更改为此处的断点？
我们做的项目可不是小项目。所以我们需要尽可能优化面粉的用量

标签： javascript vue.js vuejs2 nuxt.js

【解决方案1】：

您只需要更改this.value。在 npm 包dzcpy/transliteration 的帮助下，您可以将输入的字母转换为对应的拉丁字母。

new Vue({
  el: '#app',
  template: `<input :value="value" @input="onChange" />`,
  data() {
    return {
      value: ''
    }
  },
  methods: {
    onChange(evt) {
      this.value = transliterate(evt.target.value.toUpperCase());
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script
  async
  defer
  src="https://cdn.jsdelivr.net/npm/transliteration@2.1.8/dist/browser/bundle.umd.min.js"
></script>
<div id="app"></div>

【讨论】：