Vue常见修饰符

一、v-model 修饰符（用于表单输入）

修饰符	说明	示例
.lazy	在 change 事件后才同步数据（默认是 input）	<input v-model.lazy="value" />
.number	将输入的字符串自动转换为数字	<input v-model.number="age" />
.trim	自动去除首尾空格	<input v-model.trim="name" />

二、事件修饰符（@ 或 v-on 使用）

修饰符	说明	示例
.stop	阻止事件冒泡	@click.stop="doSomething"
.prevent	阻止默认行为（如链接跳转、表单提交）	@submit.prevent="handleSubmit"
.capture	添加事件监听器时使用捕获模式（先父后子）	@click.capture="handleClick"
.self	只有事件来自绑定元素自身时才触发	@click.self="closeModal"
.once	事件只触发一次	@click.once="doOnce"
.passive	提高滚动性能，不调用 event.preventDefault()	@scroll.passive="onScroll"

三、按键修饰符（用于键盘事件）

修饰符	说明	示例
.enter	回车键	@keyup.enter="submit"
.esc	ESC 键	@keyup.esc="cancel"
.tab	Tab 键	@keydown.tab="moveFocus"
.delete	Delete/Backspace 键	@keydown.delete="remove"
.up/.down	方向键	@keydown.up="moveUp"
.ctrl/.alt	控制组合键（可叠加使用）	@keydown.ctrl.enter="send"

📌 你还可以使用 .exact 精确匹配修饰组合：

<!-- 仅按下 Ctrl 键时触发（而不是 Ctrl + 其他键） -->
<button @click.ctrl.exact="onlyCtrl">仅 Ctrl</button>

✅ 实用小结

类型	常用修饰符
表单输入	.lazy、.trim、.number
事件控制	.stop、.prevent、.self、.once
键盘事件	.enter、.esc、.delete、.ctrl.enter 等
性能优化	.passive（滚动优化）
精准控制	.exact（精确匹配组合键）