vue3 input 只能输入0-100 且只能输入数字和小数

Vue3 中，你可以使用 v-model 绑定一个 input 元素，并结合自定义指令或者计算属性以及正则表达式来限制用户输入的范围和内容。这里是一个简单的示例：

<template>
  <input type="number" v-model.number="limitedValue" :min="0" :max="100" />
</template>

<script>
export default {
  data() {
    return {
      limitedValue: 0, // 初始值
    };
  },
};
</script>

在这个例子中，`v-model.number` 指令会确保输入始终是数值格式。`:min="0"` 和 `:max="100"` 属性限制了最小值和最大值。如果你想允许小数点，可以去掉 `type="number"`，但它将默认只接受整数。

如果你想在输入时实时验证，可以在模板上添加一个事件处理器，例如 `@input`：

<template>
  <input type="number" v-model.number="limitedValue" :min="0" :max="100"
         @input="validateInput">
</template>

<script>
export default {
  methods: {
    validateInput(event) {
      const inputValue = parseFloat(event.target.value);
      if (isNaN(inputValue) || inputValue < 0 || inputValue > 100) {
        event.target.value = Math.min(100, Math.max(0, this.limitedValue));
      }
    },
  },
};
</script>

这个方法会在用户每次键入后检查输入是否有效，如果无效则恢复到合法范围内。