阻止在vue.js中键入某些数字

<template>
  <input v-on:keypress.prevent="blockNumbers" />
</template>

<script>
export default {
  methods: {
    blockNumbers(event) {
      const keyCode = event.keyCode || event.which;
      const blockedNumbers = [1, 2, 3]; // 需要阻止的数字
      if (blockedNumbers.includes(keyCode)) {
        event.preventDefault();
      }
    },
  },
};
</script>

<template>
  <input v-block-numbers />
</template>

<script>
export default {
  directives: {
    blockNumbers: {
      inserted(el) {
        el.addEventListener("keypress", (event) => {
          const keyCode = event.keyCode || event.which;
          const blockedNumbers = [1, 2, 3]; // 需要阻止的数字
          if (blockedNumbers.includes(keyCode)) {
            event.preventDefault();
          }
        });
      },
    },
  },
};
</script>

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

<script>
export default {
  data() {
    return {
      inputValue: "",
    };
  },
  computed: {
    filteredValue() {
      const blockedNumbers = [1, 2, 3]; // 需要阻止的数字
      return this.inputValue.replace(new RegExp(blockedNumbers.join("|"), "g"), "");
    },
  },
};
</script>