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

1.使用

  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 删除键

Vue2键盘事件:keydown/keyup...的更多相关文章

  1. 键盘事件keydown、keypress、keyup随笔整理总结(摘抄)

    原文1:http://www.cnblogs.com/silence516/archive/2013/01/25/2876611.html 原文2:http://www.cnblogs.com/leo ...

  2. 详解键盘事件(keydown,keypress,keyup)

    一.键盘事件基础 1.定义 keydown:按下键盘键 keypress:紧接着keydown事件触发(只有按下字符键时触发) keyup:释放键盘键 顺序为:keydown -> keypre ...

  3. Vue2键盘事件

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1 ...

  4. 键盘事件keydown、keypress、keyup随笔整理总结

    英文输入法:   事件触发顺序:keydown - > keypress - > keyup   中文输入法:   firfox:输入触发keydown,回车确认输入触发keyup chr ...

  5. 键盘事件keydown、keypress、keyup

    事件触发顺序:keydown - > keypress - > keyup   中文输入法:   firfox:输入触发keydown,回车确认输入触发keyup chrome:输入触发k ...

  6. 无线端不响应键盘事件(keydown,keypress,keyup)

    今天在项目时,在android手机上使用输入法的智能推荐的词的话,不会触发keyup事件,一开始想到在focus时使用一个定时器,每隔100ms检测输入框的值是否发生了改变,如果改变了就作对应的处理, ...

  7. 键盘事件(keyup、keydown、keypress)

    1.onkeyup 和onkeydown时,keyCode是不区分大小写的,会将小写字母自动转化为大写字母. 2 onkeypress时,区分大小写. 3兼容event.keyCode||event. ...

  8. Vue2学习笔记:键盘事件

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...

  9. Vue 键盘事件

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...

随机推荐

  1. ext4文件系统的delalloc选项造成单次写延迟增加的分析

    最近我们的服务进程遇到kill -15后处于Z的状态,变为了僵尸进程,经过/proc/{thread_id}/stack查看其上线程的栈,发现是卡在了fwrite的过程中,而我们的系统中所有文件系统挂 ...

  2. 超酷的 Vim 搜索技巧

    尽管目前我们已经涉及 Vim 的多种特性,但此编辑器的特性集如此庞大,不管我们学习多少,似乎仍然远远不足.承接我们的 Vim 教程系列,本文我们将讨论 Vim 提供的多种搜索技术. 不过在此之前,请注 ...

  3. 对simhash算法的一些思考

    http://2588084.blog.51cto.com/2578084/558873

  4. UNIX 家族及Linux

    Unix成长为一个非私有的操作系统,是因为1956年的AT&T公司受命于联邦去经营电报电话服务.当然也可以开发软件,甚至那个软件可以有”合理”收费的许可证,但是这个公司却被禁止从事任何和计算机 ...

  5. sqlserver不太常见的,可能常见但又疑问的tsql语句

    2013年10月29日16:01:58 当数据有 time类型列时候,比如 打电话的通话时长,我们查询时候不方便,我们可以添加一个冗余列,直接统计秒 ,但是 后期知道的,现在我把例如 00:12:23 ...

  6. Python读文本文件

    file_object = open('thefile.txt') try: all_the_text = file_object.read() finally: file_object.close( ...

  7. git server 搭建指南

    搭建git服务器的经验总结 一: Server端的设置 1. 安装 git, git-core 2. 安装 ssh-server. (代码上传通道) 3. 创建git 用户 指定其目录 和所在组 4. ...

  8. 扯淡 id 先用着

    )) { ) { ) & ) { ); }}

  9. Windows平台下tomcat+java的web程序持续占cpu问题调试

    1.问题 Tomcat服务器跑了一段时间后,发现Tomcat进程占用的CPU资源在80%-100%间,加上其它的进程,整个服务器的CPU处理100%运行状态. 2.通过process explorer ...

  10. JAVA中Set集合--HashSet的使用

    一.使用HashSet添加一个String类型的值: public static void hashSet1(){ HashSet<String> hashSet = new HashSe ...