vue中input限制输入只能是数字和大小写字母

在 Vue 中，你可以使用一些特定的指令来限制输入只能是数字和大小写字母。下面是一个示例，演示如何使用 Vue 的指令来实现这一目的：

<template>
  <div>
    <label for="input">请输入只包含数字和大小写字母的字符串：</label>
    <input type="text" id="input" v-model="inputStr" v-on:input="validateInput" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputStr: '',
    };
  },
  methods: {
    validateInput() {
      // 使用正则表达式验证输入是否符合要求
      const pattern = /^[a-zA-Z0-9]+$/;
      if (!pattern.test(this.inputStr)) {
        // 不符合要求，清除非数字和字母的字符
        this.inputStr = this.inputStr.replace(/[^a-zA-Z0-9]/g, '');
      }
    },
  },
};
</script>

在这个示例中，我们使用了`v-model`指令将输入框的值绑定到`inputStr`变量上。然后，我们使用`v-on:input`指令来监听输入框的输入事件。在`validateInput`方法中，我们使用正则表达式来验证输入是否符合要求。如果输入不符合要求，我们使用`replace()`方法清除非数字和字母的字符。这样，用户就只能输入数字和大小写字母了。