Vue.js 中 v-on 的按键修饰符用于指定触发事件所需的按键组合：.enter：Enter 键.ctrl：Ctrl 键.alt：Alt 键.shift：Shift 键.meta：Meta 键（macOS 中为 Command 键）.prevent：防止默认行为.stop：停止事件冒泡.once：仅在第一次触发时触发事件.capture：在捕获阶段触发事件.passive：创建非阻塞侦听器
Vue.js 中 v-on 的按键修饰符
v-on 指令用于监听 HTML 元素上的事件，它支持一系列按键修饰符，用于指定需要按下哪些按键才能触发事件。这些修饰符包括：
1. .enter
监听 Enter 键被按下。
立即学习“前端免费学习笔记（深入）”；
<button v-on:click.enter="submitForm">提交</button>
2. .ctrl
监听 Ctrl 键被按下。
<input v-on:keydown.ctrl="toggleBold">
3. .alt
监听 Alt 键被按下。
<a v-on:click.alt="openLinkInNewTab">打开新标签页</a>
4. .shift
监听 Shift 键被按下。
<input v-on:focus.shift="selectText">
5. .meta
监听 Meta 键被按下（在 macOS 中为 Command 键）。
<button v-on:click.meta="resetSettings">重置设置</a>
6. .prevent
防止事件的默认行为。
<a v-on:click.prevent="someFunction">单击我</a>
7. .stop
停止事件冒泡。
<div v-on:click.stop="handleDivClick"> <button v-on:click="handleButtonClick">单击我</button> </div>
8. .once
只在第一次触发时触发事件。
<button v-on:click.once="showNotification">显示通知</button>
9. .capture
在捕获阶段触发事件，而不是冒泡阶段。
<div v-on:click.capture="handleCapture">单击我</div>
10. .passive
创建非阻塞侦听器，允许页面继续响应用户交互。
<div v-on:scroll.passive="scrollFunction">滚动我</div>
注意：这些修饰符按顺序应用。例如，.ctrl.enter 将匹配只有在同时按下 Ctrl 和 Enter 键时触发的事件。
以上就是vue中v-on的按键修饰符有哪些的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
569
