<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="../js/vue.min.js"></script>

    <title>触发键盘事件</title>

</head>

<body>

    <div id="itany">

        <!-- 触发键盘事件 -->

        <!-- 第一种：原生js -->

        <!-- <input type="text" @keydown="show2($event)"> -->

        <!-- 第二种vue提供 -->

        <input type="text" @keydown.13="show()">

        <!-- 或 -->

        <input type="text" @keydown.enter="show()">

        <!-- 自定义键位别名 -->

        <input type="text" @keydown.f1="show3()">

    </div>

</body>

<script>

        window.onload = function(){

            //自定义键位别名

            Vue.config.keyCodes = {

                a:65,

                f1:112

            }

            new Vue({

                el:'#itany',

                data:{

                },

                methods: {

                    // 第一种

                    show2(e){

                        if(e.keyCode == 13){

                            console.log('您按下了回车！');

                        }

                    },

                    // 第二种

                    show(){

                        console.log('您按下了回车！');

                    },

                    // 自定义键位别名

                    show3(){

                        console.log('您按下了f1！');

                    }

                }

            });

    }

</script>

</html>

vue中触发键盘事件的两种方法和如何自定义键位事件，完整代码！的更多相关文章

  1. 在Activity中响应ListView内部按钮的点击事件的两种方法！！！

    在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...

  2. Java中获取键盘输入值的三种方法

    Java中获取键盘输入值的三种方法     Java程序开发过程中,需要从键盘获取输入值是常有的事,但Java它偏偏就没有像c语言给我们提供的scanf(),C++给我们提供的cin()获取键盘输入值 ...

  3. .net中创建xml文件的两种方法

    .net中创建xml文件的两种方法 方法1:根据xml结构一步一步构建xml文档,保存文件(动态方式) 方法2:直接加载xml结构,保存文件(固定方式) 方法1:动态创建xml文档 根据传递的值,构建 ...

  4. 在Delphi中使用C++对象（两种方法，但都要改造C++提供的DLL）

    Delphi是市场上最好的RAD工具,但是现在C++占据着主导地位,有时针对一个问题很难找到Delphi或Pascal的解决方案.可是却可能找到了一个相关的C++类.本文描述几种在Delphi代码中使 ...

  5. 在WebBrowser中执行javascript脚本的几种方法整理(execScript/InvokeScript/NavigateScript) 附完整源码

    [实例简介] 涵盖了几种常用的 webBrowser执行javascript的方法,详见示例截图以及代码 [实例截图] [核心代码] execScript方式: 1 2 3 4 5 6 7 8 9 1 ...

  6. Android中Intent传递对象的两种方法(Serializable,Parcelable)

    今天要给大家讲一下Android中 Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object);另一种是 Bundle.putP ...

  7. [转]Android中Intent传递对象的两种方法(Serializable,Parcelable)

    http://blog.csdn.net/xyz_lmn/article/details/5908355 今天要给大家讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种 ...

  8. Android高手进阶教程(十七)之---Android中Intent传递对象的两种方法(Serializable,Parcelable)!

    [转][原文] 大家好,好久不见,今天要给大家讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object); ...

  9. 在shell script中进行数值运算的两种方法

    方法1:使用"$((计算式))"的方式进行数值运算,不需要使用declare命令显示声明数值型变量来存储计算结果: 方法2:使用declare命令配合"-i"选 ...

随机推荐

  1. 简单实现一个快速传输电子书到kindle的小项目

    前言 最近翻出来好久没有看的kindle,准备继续我的阅读之路.当然,也是因为发现了一个非常好的获取电子书资源的网站,又燃起了我的阅读兴趣. 然而,往kindle里传输电子书的方式一共有四种: 直接在 ...

  2. Mysql8.0.17忘记密码情况下重置密码

    1.以管理员身份打开命令窗口cmd,输入命令: net stop mysql 2.开启跳过密码验证登录的mysql服务,输入命令 mysqld --console --skip-grant-table ...

  3. libx264开发笔记（一）：libx264介绍、海思平台移植编译

    前言   在编译ffmpeg时,使用到h264编码时是需要依赖libx264的,本文章是将将libx264作为静态库移植到海思上.   相关博客 <Qt开发笔记之编码x264码流并封装mp4(一 ...

  4. asp.net多语言网站的完整解决方案

    应用场景:通过前端切换网站使用英语.中文两种语言. 解决思路:ResourceManager会通过当前线程区域性信息,读取对应的Resource文件,从而达到切换语言的效果,其实质是是在切换当前线程的 ...

  5. 随手用Java写的bilibili缓存视频转换器（合成分离的视频和音频）

    使用java随手写成,有需要可以自行修改. 项目使用到了fastjson,可以自行替换成其他json解析工具. 写这个的原因是因为下载到的其他工具弄出来的视频标题过长(应该取entry.json中的s ...

  6. 进制转换 Java day6

    今天周末学习的不多,只学习了一些二进制转十进制,八进制.十六进制,以及数据单位 二进制转十进制 我们都知道十进制转二进制就是除以2取余的方法.那二进制转到十进制又如何处理呢,今天我来学习以下 我们看看 ...

  7. 入门级的Makefile制作dynamic lib

    代码文件结构: . ├── dynamiclib_add.c ├── dynamiclib_mul.c ├── dynamiclibs.h ├── libs └── Makefile 1 direct ...

  8. HashMap：为什么容量总是为2的n次幂

    HashMap:为什么容量总是为2的n次幂1).HashMap是根据key的hash值决定key放到哪个桶中,通过tab[i = (n - 1) & hash]公式计算得出 这里的n是Hash ...

  9. VUE开发--环境配置(一)（转）

    无剑_君关注 0.312019.05.09 11:53:43字数 1,073阅读 19,627        https://www.jianshu.com/p/a494417def99?utm_so ...

  10. BLOB 和 TEXT 有什么区别？

    BLOB 是一个二进制对象,可以容纳可变数量的数据.TEXT 是一个不区分大小写 的 BLOB. BLOB 和 TEXT 类型之间的唯一区别在于对 BLOB 值进行排序和比较时区分大小 写,对 TEX ...