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"选 ...
随机推荐
- [翻译] TensorFlow 分布式之论文篇 "Implementation of Control Flow in TensorFlow"
[翻译] TensorFlow 分布式之论文篇 "Implementation of Control Flow in TensorFlow" 目录 [翻译] TensorFlow ...
- mxnet源码阅读笔记之include
写在前面 mxnet代码的规范性比Caffe2要好,看起来核心代码量也小很多,但由于对dmlc其它库的依赖太强,代码的独立性并不好.依赖的第三方库包括: cub dlpack dmlc-core go ...
- tensorflow源码解析之framework-graph
目录 什么是graph 图构建辅助函数 graph_transfer_info 关系图 涉及的文件 迭代记录 1. 什么是graph graph是TF计算设计的载体,如果拿TF代码的执行和Java代码 ...
- 使用flask进行mock接口
在测试日常过程中,我们经常会遇到因为环境问题,或者是因为上下游,前后端开发进度不一,提测时间不一等情况.这时候我们可以通过mock的方式去完成一些操作.今天给大家分享一个通过flask去mock接口, ...
- Spfa 求含负权边的最短路 + 判断是否存在负权回路
在Bellman-Ford算法之后,我们总算迎来了spfa算法,其实就如同堆优化Dijkstra算法之于朴素版Dijkstra算法,spfa算法仅仅是对Bellman-Ford算法的一种优化,但是在形 ...
- 二维码生成工具——QRCode
下载QRCode的源代码:https://github.com/davidshimjs/qrcodejs 引入项目中:<script type="text/javascript&quo ...
- Mod_Security 安装配置
Mod_Security 安装配置 OS平台:Ubuntu 16 服务器:Apache2 一.更新Ubuntu apt-get更新源 sudo mv /etc/apt/sources.list /et ...
- Java设计模式之单例模式理解
前言 本片博客主要记录Java23种设计模式中的创建型模式中的单例模式.单例模式可分为两类,一种是饿汉式,一种是懒汉式.饿汉式的三种设计方式(静态变量方式.静态代码块方式.枚举方式),懒汉式(单锁检查 ...
- C# WinForm 设置按纽为透明，使用背景色
今天开发登陆界面时,遇到一个窗体控制设置问题: 1.将按纽设置为透明: 2.并且使用背景图片的颜色: 3.并且需要当点击这个按纽时,仍然显示背景图片颜色: 4.去掉按纽边框显示线: 需要的效果如下: ...
- 8元电调调参教程（使用Arduino Uno）| BLHeli无刷电调的固件烧写及调参
前言 淘某上有款8元电调,性价比很高,但是需要简单设置一下 1.材料清单 (1)Arduino UNO开发板 (2)BLHeliSuite 16.7.14.9.0.1 调参软件及固件已上传Gitee: ...