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. JSP弹出对话框方式小结

    转自:http://blog.csdn.net/ithomer/article/details/8033002 该博主(创业)另一博客地址: http://blog.mimvp.com JSP 网页在 ...

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

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

  3. iOS配置SSO授权

    禁止/激活SSO授权 用于控制平台是否使用SSO方式进行授权(目前只支持新浪微博.Facebook.QQ空间.腾讯微博.人人网.Pocket.默认情况下是激活SSO授权方式.),代码如下: //激活S ...

  4. ipsec在企业网中的应用（IKE野蛮模式）(转)

    from:http://lulu1101.blog.51cto.com/4455468/817954 ipsec在企业网中的应用(IKE野蛮模式) 案例: 本实验采用华为三台F100防火墙,和一台s3 ...

  5. php 执行命令函数

    /** Method to execute a command in the terminal Uses : 1. system 2. passthru 3. exec 4. shell_exec * ...

  6. Android之listview运用（美团美食列表）

    首先我们将listview简单实现,有图形,有文字:效果如图 之前我们完成了一个较为简单的listview视图列表,但是生活中我们往往碰到的 是更为复杂列表,有图像有评分标准,不如我们来试一试手,做一 ...

  7. 两段检验系统生成的identityHashCode是否重复的代码

    前言:承接上一篇hashCode和identityHashCode 的关系,下面的两段简单的程序主要是检验一下系统生成的identityHashCode是否存在重复的情况. 1:可以自由控制生成对象的 ...

  8. numpy 数组创建例程

    1 numpy.empty empty(shape[, dtype=float, order='C']) 创建指定 shape 和dtype 的未初始化数组 返回:ndarray. 说明:order ...

  9. Oracle 12C -- clone a remote pdb

    Connect to the remote CDB and prepare the remote PDB for cloning. SQL> select con_id,dbid,name,op ...

  10. c2java select algorithm

    对于非常多应用来说,随机算法是最简单的或者最快的.既简单又快的有没有呢? 那须要深刻的洞察力或者革命性的突破. 什么是随机算法 随机算法与确定算法差别是:它还接收输入随机比特流来做随机决策. 对于同一 ...