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


1.使用

​


[html] 

​​view plain​​

 ​​copy​​


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">
  6. <script src="vue.js"></script>

  8. <script type="text/javascript">
  9. window.onload = function(){
  10. var vm = new Vue({
  11. el:'#box',
  12. methods:{
  13. show:function(ev){
  14. if(ev.keyCode == 13){
  15. alert('你按回车键了');
  16. }
  17. },
  18. }
  19. });
  20. }
  21. </script>
  22. </head>
  23. <body>
  24. <div id="box">
  25. <input type="text" placeholder="请输入" @keyup="show($event)">

  27. <input type="text" placeholder="请输入" @keyup.13="show($event)">
  28. </div>
  29. </body>
  30. </html>

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


两个input的效果都是一样的 如果按13  也就是按键 enter 才会执行弹窗！！
@keyup.13 回车
@keyup.enter 回车
@keyup.left 左键
@keyup.right 右键
@keyup.up 上键
@keyup.down 下键
@keyup.delete 删除键

​