vue校验只能输入数字

在Vue.js中，你可以通过使用v-model指令以及自定义的验证规则来限制用户输入只能是数字。这里有一个简单的例子：

首先，在HTML模板里创建一个输入框，并绑定了v-model属性：

<input type="text" v-model.number="inputValue" @blur="validateInput">

- `v-model.number`：这个特殊的指令会确保输入值始终是数字，如果尝试输入非数字字符，则自动转换成数字。如果输入的是非数字字符，其值将会清空。

然后，在Vue实例中定义一个方法来处理输入框内容的变化和验证：

export default {
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    validateInput() {
      if (!Number.isNaN(this.inputValue) && this.inputValue !== '') {
        // 验证成功，做进一步的操作
      } else {
        // 输入非数字，给出提示
        this.$emit('invalid-input', '请输入数字');
      }
    },
  },
};

在这个例子中，当用户离开输入框（`@blur`事件触发），`validateInput`方法会被调用，检查输入是否有效。如果输入不是数字，就会触发`invalid-input`事件，你可以监听这个事件并显示错误消息。