Vue.js中@change与$event.target.value的数值比较及按钮禁用异常问题

让我帮你拆解下遇到的几个问题，其实根源主要集中在类型不匹配和按钮禁用逻辑错误这两点上：

1. 核心问题分析 #

字符串 vs 数字的比较陷阱 #

输入框的value默认是字符串类型，你直接用start=$event.target.value赋值，导致start和final都是字符串格式。当你做<比较时，JS会按字符串的字典序来对比，而不是数字大小：

• 比如"2"和"12"对比时，第一个字符"2"的ASCII码（50）比"1"（49）大，所以"2"<"12"会返回false，这就是第一个异常的原因。
• 后续操作出现的不一致结果，本质也都是因为字符串和数字的比较逻辑差异导致的。

按钮禁用逻辑完全颠倒 #

你给按钮的disabled绑定了isButtonActive方法，这个方法返回start < final的结果：

• 当start < final为true时（本来应该激活按钮），disabled被设为true，反而把按钮禁用了，逻辑完全搞反。
• 另外，这里用methods不如用computed合适，因为isButtonActive是依赖start和final的计算结果，computed会自动缓存，性能更好。

2. 修复后的完整代码 #

HTML部分 #

<div id="app">
  <!-- 赋值时把字符串转为数字 -->
  <input type="number" @change="start = Number($event.target.value)">
  <input type="number" @change="final = Number($event.target.value)">
  <!-- 反转disabled的逻辑：条件成立时按钮可用 -->
  <button :disabled="!isButtonActive">Proceed</button>
  {{start}} -- {{final}} -- {{res}}
</div>

Vue.js部分 #

new Vue({
  el: '#app',
  data: {
    start: 0,
    final: 0
  },
  computed: {
    res() {
      // 现在是数字比较，结果正确
      return this.start < this.final;
    },
    // 把isButtonActive移到computed里，自动跟踪依赖
    isButtonActive() {
      return this.start < this.final;
    }
  }
})

3. 修复点详解 #

• 强制类型转换：用Number()把输入框的字符串值转为数字，确保start和final都是数字类型，这样<比较就是正确的数值大小对比，解决了前三个显示异常的问题。
• 修正按钮逻辑：把disabled绑定改为!isButtonActive——当start < final为true时，!isButtonActive是false，按钮就会被激活；反之则禁用，符合预期。
• 替换methods为computed：把isButtonActive从methods移到computed，因为它是依赖响应式数据的计算结果，computed会自动缓存结果，避免不必要的重复计算，性能更优。

4. 验证修复效果 #

• 先在第一个输入框输2，第二个输12：显示2 -- 12 -- true，按钮正常激活。
• 先在第二个输入框输12，再在第一个输2：同样显示2 -- 12 -- true，按钮激活。
• 把第一个输入框的2改为45：显示45 -- 12 -- false，按钮自动禁用。

所有异常问题都能解决啦！

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