Vue输入框数值范围校验问题：设置后无法修改输入值

你的代码里有几个关键问题导致输入框无法正常输入，我给你修正后的代码，再逐一说明问题所在：

修正后的完整代码 #

<template>
  <input type="text" v-model="numbers.one" class="one" @input="validate($event)" /> 
  <input type="text" v-model="numbers.two" class="two" @input="validate($event)" />
</template>

<script setup>
import { ref } from 'vue'

const min = ref(100)
const max = ref(1000)

const numbers = ref({
  one: 100,
  two: 100
}) 

const validate = (e) => {
  const { className, value } = e.target
  // 把输入值转成数字，非数字就设为0
  const inputNum = isNaN(Number(value)) ? 0 : Number(value)
  
  if (className === 'one') {
    if (inputNum < min.value) {
      numbers.value.one = min.value
    } else if (inputNum > max.value) {
      numbers.value.one = max.value
    } else {
      // 范围内的话就保留转换后的数字
      numbers.value.one = inputNum
    }
  } else if (className === 'two') {
    if (inputNum < min.value) {
      numbers.value.two = min.value
    } else if (inputNum > max.value) {
      numbers.value.two = max.value
    } else {
      numbers.value.two = inputNum
    }
  }
}
</script>

问题说明与修改点 #

• 变量名拼写错误：你模板里写的v-model="number.one"，但定义的响应式变量是numbers（多了个s），这直接导致双向绑定失效，输入框根本没法更新值。
• 没传事件参数：validate函数里直接用e，但你调用的时候没传$event，所以e是undefined，判断className的逻辑完全不工作。
• 字符串和数字比较出错：输入框是text类型，输入的内容是字符串，比如输入"99"，和数字100比较时会被判定为比100大，导致逻辑反转，必须先转成数字再比较。
• 校验逻辑不全：你只处理了第一个输入框，第二个输入框完全没管；而且原逻辑里，当输入值在范围内时没有主动赋值，导致输入内容没法正常更新。
• 边界判断冗余：原来写的<= min.value，当输入刚好是100时会重复赋值，可能导致输入卡顿，改成< min.value更合理。

内容的提问来源于stack exchange，提问作者Jose