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)），否则类型转换后可能丢失响应性
