Vue2键盘事件：keydown/keyup...
vue 2018-01-22 17:57:06

 

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8">  
  6.     <script src="vue.js"></script>  
  7.   
  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)">   
  26.   
  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 删除键

 

 

本文来自于：http://www.yoyo88.cn/study/vue/276.html

上一篇 vue history模式 / 页面刷新空白
下一篇 vue 国际化语言包
相关的文章
Powered by yoyo苏ICP备15045725号