Vue中@keyup事件——输入自动转大写

先说需求，两个输入框，要求输入的小写字母自动变为大写，输入非字母会自动删除。

html代码如下

<div
          class="param-box" >
          <span class="title-box">
            <span class="font-blod">允许参加舱位</span>
          </span>
          <input
            v-model="allStrategy[index].args.cabinsEnabled"
            maxlength="20"
            type="text"
            @keyup="convertCabinsEnableToRight(allStrategy[index].args, index)"
          >
        </div>
        <div
          class="param-box" >
          <span class="title-box">
            <span class="font-blod">目标舱位</span>
          </span>
          <input
            v-model="allStrategy[index].args.targetCabins"
            maxlength="20"
            type="text"
            @keyup="convertCabinsTargetToRight(allStrategy[index].args, index)"
          >
        </div>

这里就用到了Vue中的@keyup，@keyup 是按键松开的事件，当指定的按键松开会触发的事件。
@keyup.enter 回车按键松开
@keyup.left 左键松开
@keyup.right 右键松开
@keyup.up 上键松开
@keyup.down 下键松开
@keyup.delete 删除键松开
这里的JavaScript的代码为

let convertCabinsEnableToRight = function(args, index){
    var input=args.cabinsEnabled.replace(/[^a-zA-Z]/g,'')
    args.cabinsEnabled = input.toUpperCase()
  }

  let convertCabinsTargetToRight = function(args, index) {
    var input=args.targetCabins.replace(/[^a-zA-Z]/g,'')
    args.targetCabins = input.toUpperCase()
  }

**注：**在Element-ui组件中使用@keyup.enter 无效，这是因为Element-ui组件是在原生组件的基础上进行封装了的，如果想在Element-ui组件中使用@keyup 事件，那么就必须加上native关键字。
例如

<el-input
          type="password"
          placeholder="请输入密码"
          v-model="password"
          clearable
          style="width: 15%"
          @keyup.native.enter="login"
        >