Input 输入框禁止输入空格-vue

1、@keydown.native

组件不是公共组件时，方便使用
缺点：键盘输入不了空格，但是复制过来的字符串中存在空格的话（字符串前中后有空格的话都会显示），还是会显示空格

<el-input v-model="bankCode"
          @keydown.native="keydown($event)">
</el-input>
methods: {
    // 禁止输入空格
    keydown(e){
      if(e.keyCode == 32){
        e.returnValue = false
      }
    },
}

2、onkeyup

组件不是公共组件时，方便使用
键盘输入不了空格，且复制过来的字符串中存在空格的话，空格消失

<el-input v-model="backCode"
          onkeyup="this.value = this.value.replace(/\s+/g,'')">
</el-input>

3、v-model.trim

去除输入框的前后空格，中间可以输入空格，复制过来的字符串中存在空格的话，前后空格消失，中间空格保留

<el-input v-model.trim="backCode">
</el-input>

4、@input方法（在 Input 值改变时触发）

组件是公共组件时，可以使用
键盘输入不了空格，且复制过来的字符串中存在空格的话，空格消失

<el-input v-model="formValue[info.CODE]"
          @input="inputValueChange($event, info)">
</el-input>
methods: {
    inputValueChange(value, info) {
        this.formValue[info.CODE] = value.replace(/\s+/g, ''); // 禁止输入空格
    },
}