vue3输入框不能输入负数保留3位小数

在Vue 3中，如果你想要限制一个input类型的数字输入框只允许输入非负值并保留三位小数，可以使用`v-model.number`指令配合自定义事件或者计算属性来实现。这里有一个简单的例子：

<template>
  <div>
    <input type="number" v-model="formattedValue" @input="formatNumber">
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawValue: '',
      formattedValue: '',
    };
  },
  methods: {
    formatNumber(e) {
      const value = parseFloat(e.target.value);
      if (value < 0 || Number.isNaN(value)) {
        this.rawValue = 0;
        this.formattedValue = '0';
      } else {
        this.rawValue = value;
        this.formattedValue = Math.floor(value * 1000) / 1000; // 保留三位小数
      }
    },
  },
};
</script>

在这个示例中，当用户输入的数值小于零或者不是有效数字时，我们会清空输入框，并将显示值设为0。如果输入的是有效的正数，我们会将其格式化为三位小数。