vue3 如何确认文本框中输入的一定是数字

在 Vue3 中，你可以通过结合 `v-model` 指令和自定义事件或计算属性来确保输入的是数字。这里有一个简单的例子：

1. 使用 `v-model.number`：Vue的内置指令可以自动处理一些数据类型的转换，如 `v-model.number` 可以确保输入值总是数字。

<template>
  <input type="number" v-model.number="inputValue">
</template>

<script>
export default {
  data() {
    return {
      inputValue: null,
    };
  },
};
</script>

2. 自定义验证：在输入框上绑定一个 `@input` 事件，并在事件处理器中进行校验。

<template>
  <input type="text" v-model="inputValue" @input="validateInput">
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    validateInput(e) {
      if (!isNaN(this.inputValue)) {
        // 输入有效，保留数字
        this.inputValue = Number(this.inputValue);
      } else {
        // 非数字，清空或提示错误
        this.inputValue = '';
      }
    },
  },
};
</script>

3. 使用 computed 属性：如果需要在整个组件生命周期内检查输入，可以使用 computed 来动态更新。

<template>
  <input type="text" :value="formattedValue" @input="handleInputChange">
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
  computed: {
    formattedValue() {
      const value = parseFloat(this.inputValue);
      return isNaN(value) ? '' : value;
    },
  },
  methods: {
    handleInputChange(e) {
      this.inputValue = e.target.value;
    },
  },
};
</script>