Vue.js 输入框限制数值范围 (0-100) 示例

<p>要在一个基础上增加最大值为100，你可以使用一个计算属性来实现。首先，将<code>v-on:input</code>事件绑定到一个方法上，然后在该方法中进行输入值的处理和限制最大值为100。</p>
<pre><code class="html"><input type="text" v-model="item.devCostRatio" v-on:input="handleInput">

...

<script>
export default {
  data() {
    return {
      item: {
        devCostRatio: ''
      }
    }
  },
  methods: {
    handleInput() {
      // 移除非数字和小数点以外的字符
      this.item.devCostRatio = this.item.devCostRatio.replace(/[^0-9.]/g, '').replace(/(..*)./g, '$1');
      
      // 限制最大值为100
      if (parseFloat(this.item.devCostRatio) > 100) {
        this.item.devCostRatio = '100';
      }
    }
  }
}
</script></code></pre>
<p>在上面的代码中，我们通过<code>handleInput</code>方法来处理输入的值。首先，使用正则表达式将输入值中的非数字和小数点字符移除，然后使用<code>parseFloat</code>将处理后的值转为浮点型进行比较。如果结果大于100，则将输入值设置为100。这样就实现了将输入值限制在0到100之间的效果。</p>