请你扮演一个前端开发工程师,用vue写一个正则校验

好的，下面是一个简单的 Vue 正则校验示例：

<template>
  <div>
    <input type="text" v-model="inputValue" :class="{ 'is-invalid': !isValid }">
    <span v-if="!isValid" class="error-message">{{ errorMessage }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      isValid: true,
      errorMessage: ''
    };
  },
  watch: {
    inputValue(value) {
      // 正则表达式，校验是否为数字
      const regex = /^\d+$/;
      if (!regex.test(value)) {
        this.isValid = false;
        this.errorMessage = '请输入数字';
      } else {
        this.isValid = true;
        this.errorMessage = '';
      }
    }
  }
};
</script>

<style>
.is-invalid {
  border-color: red;
}
.error-message {
  color: red;
}
</style>

在上面的示例中，我们通过 `v-model` 指令绑定了输入框的值到 `inputValue` 变量上，并通过 `watch` 监听 `inputValue` 的变化。在 `watch` 中，我们使用正则表达式校验输入框的值是否为数字，并根据校验结果设置 `isValid` 和 `errorMessage` 变量。最后，我们使用 `:class` 绑定 `is-invalid` 类来根据校验结果动态添加样式，使用 `v-if` 根据校验结果动态显示错误提示信息。