v-model修饰符提供.number和.trim两种轻量高效功能：.number将输入字符串转为数字（如"42"→42，"abc"→nan），适合年龄、价格等数值字段；.trim自动去除首尾空格（如" hello "→"hello"），适用于用户名、搜索词等；二者可组合为.number.trim，按先trim后number顺序执行。
v-model 修饰符是 Vue 表单处理中轻量但高效的工具，不用写额外逻辑就能解决两类高频问题：数字类型转换和首尾空格清理。
.number 修饰符：让输入值自动转成数字
它不是限制用户只能输数字，而是在赋值时尝试把字符串转为数字。比如用户在 <input type="text"> 里输入 "42"，绑定 v-model.number="age" 后，age 就是数字 42；输入 "abc" 则得到 NaN；输入 "3.14" 得到 3.14（浮点也支持）。
- 适合用于年龄、价格、数量等需要参与计算的字段
- 搭配
type="number"使用体验更一致，但即使用 text 类型也能生效 - 注意：初始值建议设为
null或undefined，避免字符串 "0" 被误判为有效数字
.trim 修饰符：一键过滤无意义空格
用户粘贴内容、手机键盘误触、快速连按空格，都容易带入首尾空格。用 v-model.trim="searchKey"，输入 " hello " 会直接存为 "hello"，省去手动调用 .trim() 的重复操作。
- 典型场景包括登录用户名、邮箱、搜索关键词、评论输入框
- 它只处理开头和结尾，中间多个空格（如 "a b"）保持原样
- 后端接口对空格敏感时，加 .trim 可减少 400 错误或模糊匹配失败
组合使用：.number 和 .trim 可同时存在
像价格输入这种既要转数字又要清空格的场景，可以链式写：v-model.number.trim="price"。Vue 按从左到右顺序执行：先 trim 再 number，所以 " 199 " → "199" → 199。
- 注意顺序不能颠倒：.trim.number 没有意义，因为 trim 后仍是字符串，number 才起作用
- 不支持 .lazy 和 .number/.trim 混合用于同一 input（.lazy 改变事件时机，其余两个处理值本身，语义冲突）
不复杂但容易忽略。用对修饰符，表单逻辑立刻干净一截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
