vue中v-on的按键修饰符有哪些

百变鹏仔 4个月前 (09-25) #VUE

文章标签按键

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 键时触发的事件。

文章推荐

vue中v-on的按键修饰符有哪些

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器