事件与输入修饰符
修饰符让 v-model 的数据处理一步到位：.lazy 失焦/回车才同步（默认每按一键都写数据）、.number 自动转数值（否则拿到的是字符串）、.trim 去首尾空格。可串联 v-model.trim.number。
事件一侧同样有_vue 修饰符：配合表单做即时校验（去掉非数字字符、限制长度），与 computed 的 setter 是两种常见做法。
- .lazy：失焦或回车才更新数据，减少频繁写入
- .number：输入自动转 Number，避免 “12” 字符串拼接
- .trim：去首尾空格；三者可串联 v-model.lazy.trim.number
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>事件与输入修饰符</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <!-- .lazy：失去焦点才同步，适合长表单 --> <input v-model.lazy="name" placeholder="失焦才同步"> <p>姓名：{{ name }}</p> <!-- .number：自动转数值 --> <input v-model.number="age" placeholder="年龄"> <p>年龄 + 1 = {{ age + 1 }}（类型：{{ typeof age }}）</p> <!-- .trim：去空格 --> <input v-model.trim="email" placeholder="邮箱"> <p>邮箱：[{{ email }}]</p> <!-- 组合修饰符 --> <input v-model.lazy.trim.number="price" placeholder="价格"> <p>价格：{{ price }}（{{ typeof price }}）</p> </div> <script> const { createApp, ref } = Vue; createApp({ setup() { return { name: '', age: 0, email: '', price: 0 }; } }).mount('#app'); </script> </body> </html>
本节要点.lazy/.number/.trim 是输入处理的三个常用修饰符；number 修复“表单值都是字符串”的坑。
