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

1.使用

<!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方法，然后再去执行相应的业务。

两个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. （原）python中不同文件之间使用所谓的全局变量

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/8108640.html 参考网址: https://www.cnblogs.com/20150705-y ...

  2. git的几个操作

    git reference https://git-scm.com/docs 克隆 从远程仓库克隆一个项目到本地文件夹,命令如下:$ git clone https://github.com/libg ...

  3. JavaScript 消息框,警告框,确认框,提示框

    1.警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: alert("文本") 2.确认框 确认框用于使用户可以验证或 ...

  4. 使用libmagic确定文件MIME类型【示例】【转】

    原文地址:http://blog.csdn.net/vevenlcf/article/details/46122661 使用libmagic确定文件MIME类型[示例] 引用:   <http: ...

  5. LVS负载均衡之持久性连接介绍（session篇）

    在实际生产环境中,往往需要根据业务应用场景来设置lvs的会话超时时间以及防session连接丢失的问题提,如在业务支付环节,如若session丢失会导致重复扣款问题,严重影响到安全性,本小节解将会讲到 ...

  6. php.ini 中文版

    作者:金步国 版权声明 本文作者是一位开源理念的坚定支持者,所以本文虽然不是软件,但是遵照开源的精神发布. 无担保:本文作者不保证作品内容准确无误,亦不承担任何由于使用此文档所导致的损失. 自由使用: ...

  7. 阿里面试的一点感受 阿里ali片式经历和面试题

    阿里面试的一点感受 <!-- [废话开始] 百度实习三个月,明天就要离职了,感觉还挺开心的,同事们都很照顾我,Boss也比较欣赏我,我很满足了.掐指一算,这大四其实也没几个月了,同事们都在感叹大 ...

  8. Android之Activity系列总结(三)--Activity的四种启动模式

    一.返回栈简介 任务是指在执行特定作业时与用户交互的一系列 Activity. 这些 Activity 按照各自的打开顺序排列在堆栈(即返回栈,也叫任务栈)中. 首先介绍一下任务栈: (1)程序打开时 ...

  9. JAVA操作mysql(如何更加面向对象的操作数据库)

    既然谈到面向对象,所以,先把连接信息给搞个对象出来: public class DBInfo { private String driver; private String host; private ...

  10. iOS AFNetWorking下得Basic Auth认证请求方式

    我新入职了一家公司,做了一个项目,服务器的大哥说他采用的是Basic Auth认证请求方式,一般我们用的都是OAuth的认证方式,下面我们就对比一下这两种认证方式 百度百科得到如下 Basic Aut ...