Vue2中的键盘事件

来源:互联网 发布:手机淘宝怎么没有直播 编辑:程序博客网 时间:2024/06/05 14:43

Vue2键盘事件:keydown/keyup

使用:

    <!DOCTYPE html>      <html>      <head>          <title></title>          <meta charset="utf-8">          <script src="vue.js"></script>                <script type="text/javascript">              window.onload = function(){                  var vm = new Vue({                      el:'#box',                      methods:{                          show:function(ev){                              if(ev.keyCode == 13){                                  alert('你按回车键了');                              }                          },                      }                  });              }          </script>      </head>      <body>          <div id="box">              <input type="text" placeholder="请输入" @keyup="show($event)">                     <input type="text" placeholder="请输入" @keyup.13="show($event)">          </div>      </body>      </html>  

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

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

原创粉丝点击