VUE3 之 键盘事件

1. 概述

老话说的好：宁愿自己吃亏，也不让他人吃亏。

言归正传，今天我们来聊聊 VUE3 的 键盘事件。

2. 键盘事件

2.1 敲击任意键触发事件

<div id="myDiv"></div> </body> <script> const app = Vue.createApp({ // 创建一个vue应用实例 methods : { myKeydown() { console.info("myKeydown"); template : ` <input @keydown="myKeydown" /> const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素

2.2 仅敲击回车触发事件 

        template : `
              <input @keydown.enter="myKeydown" />

2.3 Tab键触发事件


        template : `
              <input @keydown.tab="myKeydown" />

2.4 退格（Backspace）或 Delete 键触发


        template : `
              <input @keydown.delete="myKeydown" />

2.5 上下左右键触发


        template : `
              <input @keydown.up="myKeydown" />

        template : `
              <input @keydown.down="myKeydown" />

        template : `
              <input @keydown.left="myKeydown" />

        template : `
              <input @keydown.right="myKeydown" />