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"选 ...
随机推荐
- AutoML论文调研
AutoLearn - Automated Feature Generation and Selection - 2017 ICDM 核心思想: 用特征之间两两回归的方法,发现相关特征的额外信息. 主 ...
- 华为交换机ACL如何使用及原则
华为交换机ACL如何使用及原则 转载自:辣条①号 源链接:https://boke.wsfnk.com/archives/480.html ACL(访问控制列表)的应用原则:标准ACL,尽量用在 ...
- 打靶笔记-01-vulnhub-moneybox
打靶笔记-01-vulnhub-moneybox 本篇笔记根据苑老师视频进行学习记录 https://www.bilibili.com/video/BV1Lv411n7Lq/?spm_id_from= ...
- LGP5591题解
题意很明确,不说了. 前置芝士:单位根反演 也就是: \[[n|a]=\frac 1 n \sum_{i=0}^{n-1}w_n^{ai} \] 看到题目给的柿子: \[\sum_{i=0}^n\bi ...
- vue3-插槽作用域的使用
当我们在父组件定义了一个数组, data() { return { name: ["lkx", "msx"] } } 想把它传到子组件处理后 props: { ...
- python链接mqtt订阅与发布
什么是mqtt: MQTT 全称为 Message Queuing Telemetry Transport(消息队列遥测传输)是一种基于发布/订阅范式的"轻量级"消息协议.该协议构 ...
- Hive框架
1.什么是Hive? Hive 是基于Hadoop之上的数据仓库.2.什么是数据仓库? 数据仓库其实就是一个数据库 数据仓库是一个面向主题的,集成的,不可更新的,随时间不变化的数据集合,它用于支持 企 ...
- asp.net多语言网站的完整解决方案
应用场景:通过前端切换网站使用英语.中文两种语言. 解决思路:ResourceManager会通过当前线程区域性信息,读取对应的Resource文件,从而达到切换语言的效果,其实质是是在切换当前线程的 ...
- python中判断为None
python中经常会有判断一个变量是否为None的情况,这里列举三种方式: if not x if x is None if not x is None *********************** ...
- linux内存（三）内核与用户空间交互
来自网址http://www.kerneltravel.net/jiaoliu/005.htm 用户程序和内核的信息交换是双向的,也就是说既可以主动从用户空间向内核空间发送信息,也可以从内核空间向用户 ...