vue 3 中input限制只能输入数字并且限制两位小数

在Vue 3中，你可以通过使用`v-model`指令结合`input`事件和正则表达式来限制只能输入数字并且限制两位小数。你可以在`input`标签上添加一个自定义的事件处理函数，然后在该函数中进行验证和处理。

首先，在你的`input`标签上添加`v-model`指令，用于绑定输入框的值到Vue实例的数据属性上。然后，为`input`标签添加一个`@input`事件处理函数，用于验证输入的值是否符合要求。

以下是一个示例代码：

<template>
  <div>
    <input v-model="number" @input="validateNumber">
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: '' // 保存输入的数字
    };
  },
  methods: {
    validateNumber() {
      // 使用正则表达式验证输入的值
      // 只允许输入数字和小数点，并限制最多两位小数
      this.number = this.number.replace(/[^\d.]/g, ''); // 去除非数字和小数点的字符
      this.number = this.number.replace(/^\./g, ''); // 去除开头的小数点
      this.number = this.number.replace(/\.{2,}/g, '.'); // 去除多余的小数点
      this.number = this.number.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); // 限制只能输入一个小数点
      this.number = this.number.replace(/^(\-)*(\