vue中触发键盘事件的两种方法和如何自定义键位事件，完整代码！
<!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中触发键盘事件的两种方法和如何自定义键位事件，完整代码！的更多相关文章
- 在Activity中响应ListView内部按钮的点击事件的两种方法！！！
在Activity中响应ListView内部按钮的点击事件的两种方法 转载:http://www.cnblogs.com/ivan-xu/p/4124967.html 最近交流群里面有人问到一个问题: ...
- Java中获取键盘输入值的三种方法
Java中获取键盘输入值的三种方法 Java程序开发过程中,需要从键盘获取输入值是常有的事,但Java它偏偏就没有像c语言给我们提供的scanf(),C++给我们提供的cin()获取键盘输入值 ...
- .net中创建xml文件的两种方法
.net中创建xml文件的两种方法 方法1:根据xml结构一步一步构建xml文档,保存文件(动态方式) 方法2:直接加载xml结构,保存文件(固定方式) 方法1:动态创建xml文档 根据传递的值,构建 ...
- 在Delphi中使用C++对象（两种方法，但都要改造C++提供的DLL）
Delphi是市场上最好的RAD工具,但是现在C++占据着主导地位,有时针对一个问题很难找到Delphi或Pascal的解决方案.可是却可能找到了一个相关的C++类.本文描述几种在Delphi代码中使 ...
- 在WebBrowser中执行javascript脚本的几种方法整理(execScript/InvokeScript/NavigateScript) 附完整源码
[实例简介] 涵盖了几种常用的 webBrowser执行javascript的方法,详见示例截图以及代码 [实例截图] [核心代码] execScript方式: 1 2 3 4 5 6 7 8 9 1 ...
- Android中Intent传递对象的两种方法(Serializable,Parcelable)
今天要给大家讲一下Android中 Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object);另一种是 Bundle.putP ...
- [转]Android中Intent传递对象的两种方法(Serializable,Parcelable)
http://blog.csdn.net/xyz_lmn/article/details/5908355 今天要给大家讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种 ...
- Android高手进阶教程(十七)之---Android中Intent传递对象的两种方法(Serializable,Parcelable)!
[转][原文] 大家好,好久不见,今天要给大家讲一下Android中Intent中如何传递对象,就我目前所知道的有两种方法,一种是Bundle.putSerializable(Key,Object); ...
- 在shell script中进行数值运算的两种方法
方法1:使用"$((计算式))"的方式进行数值运算,不需要使用declare命令显示声明数值型变量来存储计算结果: 方法2:使用declare命令配合"-i"选 ...
随机推荐
- 如何写Markdown格式文档
Markdown Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯.它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档.这种语言吸收了很多在电子邮件中 ...
- 微信小程序实现图表展示
开发可参考以下链接 点击有道云链接 小程序柱状图展示 [单元目标] 掌握小程序柱状图展示 [教学内容] 1.1 掌握组件导入 在miniprogram下的utils文件夹(若没有就新建一个)下,新建w ...
- MacBook苹果电脑绕过BootCamp安装Win7双系统
上周老婆的一个朋友的笔记本电脑说电脑太慢说帮忙清理一下电脑,我一看是MACBOOKPRO 的笔记装的双系统,之前一直接触的都是WINDOWS居多.想着干脆装个WIN10吧,谁知道一下就跳坑里了,一分区 ...
- CVE-2019-0708 RCE复现
漏洞环境 192.168.91.136 windows7 6.1.7601 192.168.91.151 kali Windows7 SP1下载链接: ed2k://|file|cn ...
- Java的浅克隆和深克隆
如何实现对象的克隆 (1)实现 Cloneable 接口并重写 Object 类中的 clone() 方法: (2)实现 Serializable 接口,通过对象的序列化和反序列化实现克隆,可以实现真 ...
- 前端工程化 Webpack基础
前端工程化 模块化 (js模块化,css模块化,其他资源模块化) 组件化 (复用现有的UI结构.样式.行为) 规范化 (目录结构的划分.编码规范化.接口规范化.文档规范化.Git分支管理) 自动化 ( ...
- TypeScript编译tsconfig.json配置
配置预览 { "include": ["src/**/*"], "exclude": ["ndoe_modules", ...
- 修道士与野人问题（BFS广度搜索）
#include "iostream.h" #include "string.h" //定义一个状态节点 typedef struct //存储各个状态 { i ...
- JAVA 用命令提示符执行java找不到或者无法加载主类
使用cmd编译执行java文件时候,报错---找不到或者无法加载主类如下图 把红色部分去掉,再次编译执行如下解决问题 ,执行成功!!!!!! 2.当我们在eclipes中执行运行的时候 ggggggg ...
- 如何在 Mac 上强制退出 App
同时按住三个按键:Option.Command 和 Esc (Escape) 键.或者,从屏幕左上角的苹果菜单 中选取"强制退出".(这类似于在 PC 上按下 Control- ...