如何在vue中监听键盘事件 - 行业资讯 - 肥雀云

　　介绍

如何在vue中监听键盘事件?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

在我们的项目经常需要监听一些键盘事件来触发程序的执行,而vue中允许在监听的时候添加关键修饰符:

& lt; input v: keyup.13=皊ubmit"在

对于一些常用键,还提供了按键别名:

& lt; input @keyup.enter=皊ubmit"祝辞,,,& lt; !——,缩写形式,——在

全部的按键别名:

, .enter
, .tab
, delete(捕获“删除”和“退格”键)
, .esc
, .space
, .up
, .down
, .left
,铃声

修饰键:

, .ctrl
, .alt
, .shift
, .meta

& lt; !——, Alt +, C ——比; 　　& lt; input @keyup.alt.67=癱lear"祝辞　　& lt; !——, Ctrl +, Click ——比; 　　& lt; div @click.ctrl=癲oSomething"祝辞Do something

与按键别名不同的是,修饰键和keyup事件一起用时,事件引发时必须按下正常的按键。换一种说法:如果要引发弹起。ctrl,必须按下ctrl时释放其他的按键;单单释放ctrl不会引发事件。

& lt; !——,按下Alt +,释放C触发,——比; 　　& lt; input @keyup.alt.67=癱lear"祝辞　　& lt; !——,按下Alt +,释放任意键触发,——比; 　　& lt; input @keyup.alt=皁ther"祝辞　　& lt; !——,按下Ctrl +,输入时触发,——比; 　　& lt; input @keydown.ctrl.13=皊ubmit"祝辞

对于elementUI的输入,我们需要在后面加上。人,因为elementUI对输入进行了封装,原生的事件不起作用。

& lt; input v模型=癴orm.name",占位符=瓣浅啤?@keyup.enter=皊ubmit"比; 　　& lt; el-input v模型=癴orm.name",占位符=瓣浅啤?@keyup.enter.native=皊ubmit"祝辞& lt;/el-input> 为什么要使用Vue

Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。

关于如何在Vue中监听键盘事件问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。