v-model.number自动将输入转为数字（如"123"→123，"abc"→nan），v-model.trim自动去除首尾空格；二者可组合为v-model.number.trim，执行顺序为先trim后number，适用于数值搜索等场景。
直接用 v-model.number 和 v-model.trim 就能实现数字转换与去除空格，不用手动 parseInt 或 trim()。
用 .number 自动转数字类型
原生 input 的值永远是字符串，比如输入 "42"，绑定到 data 里还是字符串。加 .number 后，Vue 会在赋值时自动调用 parseFloat —— 输入 "123" 变成数字 123，输入 "123abc" 截取为 123，输入 "abc" 则得到 NaN。
- 推荐搭配
type="number"使用，提升原生校验能力 - 若需严格整数，可加
step="1"并配合计算属性判断Number.isInteger(value) - 遇到 NaN 时，可用
v-if="!isNaN(age)"控制显示，或用计算属性提供默认值（如return isNaN(this.age) ? 0 : this.age）
用 .trim 去除首尾空格
用户粘贴内容、习惯性连按空格，容易让用户名、邮箱等字段带无效空格。.trim 在数据写入响应式对象前就自动清理两端空白，中间空格（如“王 小 明”）不受影响。
- 适用于用户名、昵称、搜索关键词等对首尾空格敏感的字段
- 密码框慎用 —— 有些用户确实会用空格作为密码的一部分
- 和 .number 组合写法是
v-model.number.trim，执行顺序固定：先 trim，再 number
组合使用更省心
常见场景如「年龄输入框」或「搜索关键词」，往往既要转数字又要清空格。两个修饰符可同时存在，Vue 内部按 trim → number 顺序处理：
-
<input v-model.number.trim="searchQuery">：先去掉前后空格，再尝试转数字（适合数值型搜索，如价格区间） -
<input v-model.trim="username">：纯文本去空格，避免“ admin ”被当成合法用户名 - 注意：.number 对非数字开头的输入不生效（如 "abc123" 仍为字符串），.trim 不影响换行符和制表符，仅处理空格、\t、\n 等空白字符
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
