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. iOS实现基于VLC播放器的封装效果

    前言: 在一些特定场景下,我们获取到的音视频,由于格式比较特殊,用avplayer等播放器是无法播放的,此时,我们可以借助强大的VLC播放器来处理. 原理这里不再赘述,下面我们讲一下如何添加VLC播放 ...

  2. 使用Thrift让Python为Java提供服务

    Thrift是基于TCP的,谷歌的GRPC是基于HTTP的.Thrift和GRPC都是比直接写个web接口进行调用更完美的方式,最明显的一点就是:我们可以定义结构体,避免了手动解析的过程. 但是,在将 ...

  3. python中的struct模块

    struct模块用于将python中的对象转化为bytes. 举例 demo1:将int转换为bytes buf1 = 256 bin_buf1 = struct.pack('i', buf1) # ...

  4. Selenium WebDriver使用IE浏览器 属性设置

    System.setProperty("webdriver.ie.driver", "D:\\developsoft\\Selenium_Test\\IEDriverSe ...

  5. Zabbix触发器支持的函数说明

    原文出处:https://www.zabbix.com/documentation/2.0/manual/appendix/triggers/functions 译者: pengyao abschan ...

  6. 树莓派进阶之路 (029) - 语音识别模块 LD3320(原创)

    近几天听朋友有说到LD3320 语音模块,刚好身边有块树莓派3,就在某宝上买了块自带mcu的LD3320 . 准备: 树莓派一个(配置了wiringPi开发环境的详情见本人博客:树莓派进阶之路 (00 ...

  7. C语言open()函数：打开文件函数（转）

    相关函数:read, write, fcntl, close, link, stat, umask, unlink, fopen 头文件:#include <sys/types.h>   ...

  8. MYSQL IN 与 EXISTS 的优化示例介绍

    优化原则:小表驱动大表,即小的数据集驱动大的数据集. ############# 原理 (RBO) ##################### select * from A where id in ...

  9. apk 静默安装

    老大要我弄个自动更新,要用到静默安装,网上找到了些大拿的代码,我拿去改吧改吧,先贴出来: /** * 软件静默安装 * @param apkAbsolutePath apk文件所在路径 * @retu ...

  10. 1 时间戳 2 C# 如何生成一个时间戳 3 js 时间加一分钟... 4 js string->date 5 js 取得当天0点 / 23:59:59 时间

    var str = 'Jan 23, 2019 10:25:47 AM';var strnow = new Date(str); 时间戳(timestamp),一个能表示一份数据在某个特定时间之前已经 ...