v-model.trim 可自动去除文本输入的首尾空白字符，支持 text、search、textarea 类型，不处理零宽或全角空格，可与 .lazy、.number 组合使用。
在 Vue 3 中，用 v-model.trim 就能自动去除用户输入的首尾空白字符（包括空格、制表符、换行符等）。
基础用法：直接加 .trim 修饰符
只需在 v-model 后添加 .trim，Vue 会在赋值前调用 JavaScript 的 .trim() 方法：
<input v-model.trim="username" placeholder="请输入用户名"><textarea v-model.trim="desc"></textarea>
这样，即使用户输入 " Alice "，绑定到 username 的值就是 "Alice"，无需手动处理。
注意适用范围
.trim 仅对文本类输入生效：
立即学习“前端免费学习笔记（深入）”；
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- ✅ 支持：
<input type="text">、<input type="search">、<textarea></textarea> - ❌ 不支持：
type="checkbox"、type="radio"、type="number"等非文本型控件
若强行用于 type="number"，.trim 仍会执行，但浏览器可能已过滤掉部分字符，效果不明显且不推荐混用。
处理零宽空格等特殊空白
v-model.trim 基于原生 String.prototype.trim()，它不处理 Unicode 零宽空格（如 \u200B）或全角空格（如 \u3000）。
如需兼容这类字符，可封装自定义逻辑：
- 监听
@input或使用计算属性 setter - 示例方法：
this.value = $event.target.value.replace(/^[\s\u200B\u3000]+|[\s\u200B\u3000]+$/g, '') - 更稳妥的做法是后端校验 + 前端增强清理，避免仅依赖前端 trim
和其他修饰符组合使用
.trim 可与 .lazy 或 .number 同时使用，顺序不影响功能：
-
v-model.lazy.trim：失焦时同步，且已去首尾空格 -
v-model.number.trim：先 trim 再转数字（推荐先 trim，避免" 123 "转成NaN）
Vue 内部按从左到右顺序处理修饰符，但 .trim 和 .number 的执行逻辑是独立的，无冲突。
