Vue.js:如何防止用户输入字母和数字以外的字符

<template>
  <input v-model="inputValue" @input="filterInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    filterInput() {
      this.inputValue = this.inputValue.replace(/[^a-zA-Z0-9]/g, '');
    }
  }
};
</script>

<template>
  <input v-model="inputValue" v-filter-input />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  directives: {
    filterInput: {
      inserted(el) {
        el.addEventListener('input', (event) => {
          event.target.value = event.target.value.replace(/[^a-zA-Z0-9]/g, '');
        });
      }
    }
  }
};
</script>

<template>
  <input v-model="inputValue" v-mask="'[A-Za-z0-9]'" />
</template>

<script>
import VueInputMask from 'vue-inputmask';

export default {
  data() {
    return {
      inputValue: ''
    };
  },
  directives: {
    mask: VueInputMask.default.directive
  }
};
</script>