Vue2中的键盘事件

在HTML中的键盘事件有:

1.onkeyup 事件会在键盘按键被松开时发生。

2.onkeydown 事件会在用户按下一个键盘按键时发生。

3.onkeypress 事件会在键盘按键被按下并释放一个键时发生。

那么在Vue2中我们该如何实现键盘事件呢?

Vue2键盘事件:keydown/keyup...

下面用一个列子说明如何使用:

HTML代码:

<div id="box">

   <input type="text" placeholder="请输入" @keyup="show($event)">

   <input type="text" placeholder="请输入" @keyup.13="show($event)">

</div>

 JavaScript代码:

var vm = new Vue({

   el:'#box',

   methods:{

           show:function(event){

             if(event.keyCode == 13){

                 alert('你按回车键了');

             }

         },

   }

});

当按下键盘的时候,执行show方法,然后再去执行相应的业务。

上面两个按钮的效果是一样的,因为回车键(Enter)的键盘代码是13

关于键盘值,可以查看详细的键盘键值表

这里列举一些常用的键盘事件:

@keyup.13 回车
@keyup.enter 回车
@keyup.left 左键
@keyup.right 右键
@keyup.up 上键
@keyup.down 下键
@keyup.delete 删除键

原文链接:http://www.cnblogs.com/zycbloger/p/6423132.html 

猜你喜欢

转载自blog.csdn.net/liangmengbk/article/details/83541464
今日推荐