<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="../js/vue.min.js"></script> <title>触发键盘事件</title> </head> <body> <div id="itany"> <!-- 触发键盘事件 --> <!-- 第一种:原生js --> <!-- <input type="text" @keydown="show2($event)"> --> <!-- 第二种vue提供 --> <input type="text" @keydown.13="show()"> <!-- 或 --> <input type="text" @keydown.enter="show()"> <!-- 自定义键位别名 --> <input type="text" @keydown.f1="show3()"> </div> </body> <script> window.onload = function(){ //自定义键位别名 Vue.config.keyCodes = { a:65, f1:112 } new Vue({ el:'#itany', data:{ }, methods: { // 第一种 show2(e){ if(e.keyCode == 13){ console.log('您按下了回车!'); } }, // 第二种 show(){ console.log('您按下了回车!'); }, // 自定义键位别名 show3(){ console.log('您按下了f1!'); } } }); } </script> </html>