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"选 ...
随机推荐
- python的数据结构和基本语法
1.支持的数据类型 str(字符串类型).int(整型).flout(浮点型).bool(逻辑值).complex(复数[数学上的]).bytes(字节型).list(列表).tuple(元组[不可以 ...
- tensorflow源码解析之framework-allocator
目录 什么是allocator 内存分配器的管理 内存分配追踪 其它结构 关系图 涉及的文件 迭代记录 1. 什么是allocator Allocator是所有内存分配器的基类,它定义了内存分配器需要 ...
- centos网卡配置修改
centos网卡配置文件一般位于:/etc/sysconfig/network-scripts/ 文件名一般为:ifcfg-eno或者ifcfg-eth0类似的文件,可以先用ip addr 命令或者是 ...
- Export大数据量导出和打包
项目需求 导出生成大批量数据的文件,一个Excel中最多存有五十万条数据,查询多余五十万的数据写多个Excel中.导出完成是生成的多个Excel文件打包压缩成zip,而后更新导出记录中的压缩文件路 ...
- 2.5 C++STL stack详解
文章目录 2.5.1引入 2.5.2 代码示例 2.5.3 代码运行结果 总结 2.5.1引入 stack是一种"先进后出"的容器. 不过值得注意的是stack是一种关联容器,是通 ...
- Android系统编程入门系列之硬件交互——通信硬件电信SIM卡
现在的SIM卡通常具备基站定位.语音通话.短信消息.网络流量这四大功能,而在移动端是无法对SIM卡使用基站定位功能的,所以这里只介绍移动端如何使用SIM卡实现语音通话.短信消息.数据流量三个功能. 语 ...
- MySQL基础_索引
MySQL 索引(入门): 一.介绍 1.什么是索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些 ...
- nginx配置限制同一个ip的访问频率方法
1.在nginx.conf里的http{}里加上如下代码: limit_conn_zone $binary_remote_addr zone=perip:10m; limit_conn_zone ...
- shellLab实验报告
一.预备知识 阅读课本CSAPP的第八章后完成本次实验,要求熟练掌握以下内容: 进程的概念.状态以及控制进程的几个函数(fork,waitpid,execve). 信号的概念,会编写正确安全的信号处理 ...
- vulhub漏洞环境搭建
(搭建之前建议更换成阿里的源) 在纯净ubuntu中部署vulhub环境: 1.安装docker,并用docker -v命令验证安装结果: curl -s https://get.docker.com ...