v-model默认将所有输入视为字符串，即使type="number"也如此；.number修饰符通过parsefloat()将合法数字字符串转为number类型，空值或非法输入返回nan，需配合.lazy、.trim及后端校验使用。

v-model 默认把所有输入都当字符串处理，哪怕 type="number" 的输入框，绑定到数据上仍是字符串。要让数字真正以 Number 类型存在，得靠 .number 修饰符。

为什么需要 .number？

原生表单控件的 value 属性返回的永远是字符串。比如用户输入 42，不加修饰符时，v-model="age" 得到的是字符串 "42"，不是数字 42。这会导致类型判断出错、数学运算异常、后端传参格式不符等问题。

.number 是怎么工作的？

Vue 内部在赋值前调用 parseFloat()（不是 parseInt），对输入值做一次转换：

• 合法数字字符串（如 "123"、"-45.6"、"0.7"）→ 转为对应 Number
• 空字符串、纯空白、非数字内容（如 ""、" "、"abc"）→ 返回 NaN（Vue 3 中部分场景会转为 null，需结合业务判断）
• 中间状态（如输入过程中的 "12."）→ parseFloat("12.") 返回 12，可能不符合预期

怎么正确使用 .number？

直接加在指令后面即可：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

<input type="number" v-model.number="age">

常见搭配建议：

• 配合 .lazy：避免输入中途触发转换，比如用户还在输 12. 时就变成 12，加 v-model.number.lazy 可等到失焦或回车再更新
• 配合 .trim：先去空格再转数字，防止粘贴带空格的数字（如 " 42 "）导致转换失败，写法：v-model.number.trim
• 不依赖它做校验：.number 不阻止非法输入（如字母），也不四舍五入或截断小数，前端仍需校验，后端必须兜底

注意边界情况

某些场景下 .number 行为容易被忽略：

• 输入 0 或 -0 → 正常转为数字 0
• 输入 012 → parseFloat 会转成 12（八进制解析已不生效，按十进制处理）
• 绑定的数据初始值要是响应式数字（如 ref(0)），否则类型转换后可能丢失响应性

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！