vue中v-on的按键修饰符有哪些
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">重置设置</button>
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 键时触发的事件。