vue input 输入超过180的数字自动变为180

Vue.js 是一款流行的前端框架，它提供了一种轻量级的方式来构建用户界面。如果你想要实现一个输入框（input），当用户输入的数值超过180时自动限制为180，你可以利用 Vue 的计算属性（Computed Properties）和自定义事件（Custom Events）来达到这个效果。

首先，在模板（template）里创建一个输入框，并绑定 `v-model` 到一个名为 `inputValue` 的数据属性：

<input type="number" v-model="inputValue" @input="handleInput">

然后，在 Vue 实例的 data 对象中声明 `inputValue`:

data() {
  return {
    inputValue: null,
  };
},

接下来，编写 `handleInput` 函数来处理输入事件，检查值是否超过180，如果超过则更新输入值：

methods: {
  handleInput(e) {
    const value = parseInt(e.target.value);
    if (value > 180) {
      this.inputValue = 180;
      // 或者你可以直接修改 e.target.value 如果你想实时显示180
      // e.target.value = '180';
    } else {
      this.inputValue = value;
    }
  },
},

最后，如果你想保持输入框中的值始终为整数，可以在计算属性里进行转换：

computed: {
  formattedInputValue() {
    return Math.min(this.inputValue || 0, 180);
  }
},

这样，每次用户在输入框内输入新的数字，`formattedInputValue` 都会自动校验并限制在180以内。