VUE3 之 鍵盤事件
1. 概述
老話說的好：寧願自己吃虧，也不讓他人吃虧。
言歸正傳，今天我們來聊聊 VUE3 的 鍵盤事件。
2. 鍵盤事件
2.1 敲擊任意鍵觸發事件
<body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ // 創建一個vue應用實例 methods : { myKeydown() { console.info("myKeydown"); }, }, template : ` <div> <input @keydown="myKeydown" /> </div> ` }); const vm = app.mount('#myDiv'); // 綁定id為 myDiv 的元素
2.2 僅敲擊回車觸發事件
template : ` <div> <input @keydown.enter="myKeydown" /> </div> `
2.3 Tab鍵觸發事件
template : ` <div> <input @keydown.tab="myKeydown" /> </div> `
2.4 退格（Backspace）或 Delete 鍵觸發
template : ` <div> <input @keydown.delete="myKeydown" /> </div> `
2.5 上下左右鍵觸發
template : ` <div> <input @keydown.up="myKeydown" /> </div> `
template : ` <div> <input @keydown.down="myKeydown" /> </div> `
template : ` <div> <input @keydown.left="myKeydown" /> </div> `
template : ` <div> <input @keydown.right="myKeydown" /> </div> `
3. 綜述
今天聊了一下 VUE3 的 鍵盤事件，希望可以對大家的工作有所幫助
歡迎幫忙點贊、評論、轉發、加關注 ：）
關注追風人聊Java，每天更新Java乾貨。
4. 個人公眾號
追風人聊Java，歡迎大家關注
