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"选 ...
随机推荐
- HelloWorld：通过demo，构建黑盒模型
在<源码阅读四步走,这才是阅读源码的正确姿势>一文中,给出了源码阅读的完整步骤. 本篇是<如何高效阅读源码>专题的第四篇,正式开始讲解阅读源码的具体方法! 程序界有个老传统,学 ...
- laravel7 数据迁移及填充数据
1:置迁移数据表,创建生成模型和迁移文件: php artisan make:model Article -m 2:接着,在框架中的database/migrations文件夹中找到刚创建的用户表Ar ...
- Seastar 教程（三）
原文:https://github.com/scylladb/seastar/blob/master/doc/tutorial.md Fiber Seastar 延续通常很短,但经常相互链接,因此一个 ...
- C#序列化和反序列化（json）
一,什么是Json? json是存储和交换文本信息的方法,类似xml.但是json比xml更小,更快,j更易于解析.并且json采用完全独立于语言的文本格式(即不依赖于各种编程语言),这些特性使jso ...
- 嵌入式Linux应用开发完全手册之环境搭建
@ 目录 0.下载源配置 1.电脑BIOS启动虚拟化 2.linux网卡查看与IP设置 3.windows NAT虚拟网络配置 4.修改 Ubuntu 的 mountd 端口 5.vim设置 6.Mo ...
- bat加mimikatz一键获取密码
1 @echo off 2 >nul 2>&1 "%SYSTEMROOT%\system32\cacls.exe" "%SYSTEMROOT%\sys ...
- CF932G Palindrome Partition(回文自动机)
CF932G Palindrome Partition(回文自动机) Luogu 题解时间 首先将字符串 $ s[1...n] $ 变成 $ s[1]s[n]s[2]s[n-1]... $ 就变成了求 ...
- 怎么清屏？怎么退出当前命令？怎么执行睡眠？怎么查看当前用户 id？查看指定帮助用什么命令？
清屏:clear 退出当前命令:ctrl+c 彻底退出 执行睡眠 :ctrl+z 挂起当前进程 fg 恢复后台 查看当前用户 id:"id":查看显示目前登陆账户的 uid 和 g ...
- 解释Spring支持的几种bean的作用域？
Spring框架支持以下五种bean的作用域: singleton :bean在每个Spring ioc 容器中只有一个实例. prototype:一个bean的定义可以有多个实例. request: ...
- Java 中的同步集合与并发集合有什么区别？
同步集合与并发集合都为多线程和并发提供了合适的线程安全的集合,不过并发 集合的可扩展性更高.在 Java1.5 之前程序员们只有同步集合来用且在多线程并发 的时候会导致争用,阻碍了系统的扩展性.Jav ...