vue 前端校验 数字 可以是整数 可以是小数 但是限制只能输入小数点后四位 校验规则实现

在Vue前端校验中，要实现数字的输入限制，即数字可以是整数也可以是小数，但小数点后的位数只能有四位，可以通过以下步骤实现：

1. 使用`v-model`指令创建数据绑定，并配合`watch`属性或计算属性（computed）来监控输入值的变化。
2. 利用正则表达式来校验输入值。正则表达式可以构造为`/^\d+(\.\d{0,4})?$/`，这个表达式意味着：
- `^\d+`：从字符串开始的位置匹配一个或多个数字，代表整数部分。
- `(\.\d{0,4})?`：非捕获组，用于匹配小数点后最多四位数字。这部分是可选的，因为整数没有小数点。
3. 校验函数可以在`watch`中定义，并通过`v-model`的`@input`事件触发，也可以通过计算属性返回处理后的值来实现。
4. 当输入的值不符合规则时，可以使用`$refs`或者`v-if`等条件判断，给出错误提示或者清空不符合规则的输入部分。

以下是一个简单的示例代码：

<template>
  <div>
    <input type="text" v-model="number" @input="validateNumber" />
    <p v-if="!isValid">输入的小数位数超过4位，请重新输入！</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: '',
      isValid: true
    };
  },
  methods: {
    validateNumber() {
      const regex = /^\d+(\.\d{0,4})?$/;
      this.isValid = regex.test(this.number);
    }
  }
};
</script>

在这个示例中，当用户在`<input>`中输入时，`validateNumber`方法会即时触发，校验输入值是否符合规定的格式。如果不符合（即小数位数超过四位），则`isValid`会被设置为`false`，并通过`v-if`指令显示错误提示。