vue3中表单验证正则表达式数字0-9

在Vue3中，你可以使用`v-model`指令结合自定义的正则表达式来进行表单验证。如果你想限制输入的是0到9之间的数字，你可以使用这样的正则表达式：`\d`。这表示匹配任何一个数字字符。下面是一个简单的例子：

<template>
  <div>
    <input v-model="numberInput" @blur="validateNumber">
    <p :class="{ 'error': hasError }">{{ errorMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numberInput: '',
      hasError: false,
      errorMessage: ''
    };
  },
  methods: {
    validateNumber() {
      const regex = /^\d$/;
      if (!regex.test(this.numberInput)) {
        this.hasError = true;
        this.errorMessage = '请输入0-9之间的数字';
      } else {
        this.hasError = false;
        this.errorMessage = '';
      }
    }
  }
};
</script>

<style scoped>
.error {
  color: red;
}
</style>

在这个例子中，当用户停止键入并触发`@blur`事件时，会调用`validateNumber`方法，如果输入不符合正则表达式，就会显示错误消息。