vue input 限制输入范围

Vue 中可以使用 v-model 绑定输入框，并结合 Vue 的计算属性或者事件处理来限制输入范围。主要有两种常见的方式：

1. **使用自定义指令 (v-model.number)**:
如果你想要限制数字输入，Vue官方提供了一个内置的修饰符 `.number`，例如：

   <input type="number" v-model.number="value" :min="minValue" :max="maxValue">

这里 `value` 是绑定的数据，`minValue` 和 `maxValue` 分别是允许的最小值和最大值。

2. **计算属性**:
可以在数据对象中定义一个计算属性，检查输入值是否在范围内：

   data() {
     return {
       inputValue: '',
       minValue: 0,
       maxValue: 100,
     };
   },
   computed: {
     formattedInput() {
       const val = parseInt(this.inputValue);
       if (isNaN(val) || val < this.minValue || val > this.maxValue) {
         return this.minValue;
       } else {
         return val;
       }
     }
   },
   watch: {
     formattedInput(newVal) {
       this.inputValue = newVal;
     }
   },
   methods: {
     handleInputChange(event) {
       // 更新输入值，但保留计算后的有效值
       this.formattedInput = event.target.value;
     }
   },
   template: `
     <input type="text" v-model="formattedInput" @input="handleInputChange">
   `,

3. **事件监听和验证**:
如果是文本输入，可以在输入事件发生后进行实时验证：

   methods: {
     handleInputChange(event) {
       const val = event.target.value;
       if (!/^[0-9]*$/.test(val) || Number(val) < this.minValue || Number(val) > this.maxValue) {
         event.target.value = this.minValue; // 或者清除输入
       }
     }
   }