Vue.js 输入框限制数字范围 (0-100) - 使用 v-model 和 计算属性

可以通过 v-model 和计算属性来限制输入的数字范围。首先，在 Vue 实例中创建一个 data 属性来存储输入的数字，例如 inputNumber: 0。然后，在模板中使用 <input> 元素和 v-model 指令将输入的值绑定到该属性上。

接下来，可以使用计算属性来限制输入的数字范围。在计算属性中，使用 get 方法获取绑定的值，然后使用 set 方法来限制输入的范围。例如：

computed: {
  limitedNumber: {
    get() {
      return this.inputNumber;
    },
    set(value) {
      if (value < 0) {
        this.inputNumber = 0;
      } else if (value > 100) {
        this.inputNumber = 100;
      } else {
        this.inputNumber = value;
      }
    }
  }
}

在模板中，使用计算属性 limitedNumber 来替代原来的 inputNumber，这样就可以限制输入的数字范围了：

<input type="number" v-model="limitedNumber">

这样，用户只能输入 0 到 100 之间的数字。如果输入小于 0 的数字，将自动设置为 0；如果输入大于 100 的数字，将自动设置为 100。