Vue之键盘事件
1.使用keydown触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(){
alert(1);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" @keydown="show">
</div>
</body>
</html>
描述：
按下键盘触发show方法，弹出框1.
结果：
2.按下键盘弹出事件的键码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(ev){
alert(ev.keyCode);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" @keydown="show($event)">
</div>
</body>
</html>
3.keyup事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(ev){
alert(ev.keyCode);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" @keyup="show($event)">
</div>
</body>
</html>
4.Vue中在键盘事件后面添加键码值就可以说明是按下了哪个键
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(){
alert('您按回车了');
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" @keyup.13="show()">
</div>
</body>
</html>
4.使用键名enter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(){
alert('您按回车了');
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" @keyup.enter="show()">
</div>
</body>
</html>
5.使用键名left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{ },
methods:{
show:function(){
alert(1);
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" @keyup.left="show()">
</div>
</body>
</html>
Vue之键盘事件的更多相关文章
- Vue中键盘事件
Vue中监听 键盘事件及修饰符 键盘事件: keyCode 实际值 48到57 0 - 9 65到90 a - z ( A-Z ) 112到135 F1 - F ...
- vue自定义键盘事件
//自定义全局按键修饰符 Vue.config.keyCodes.f2 = 13;//enter为13此时F2==ENTER 调用;@keyup.f2='addData()'
- Vue_(基础)Vue中的事件
Vue.js中文文档 传送门 Vue@事件绑定 v-show:通过切换元素的display CSS属性实现显示隐藏: v-if:根据表达式的真假实现显示隐藏,如果隐藏,它绑定的元素都会销毁,显示的时候 ...
- vue学习笔记（一）关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- vue添加页面键盘事件
我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.en ...
- vue使用element-ui的el-input监听不了键盘事件解决
vue使用element-ui的el-input监听不了键盘事件,原因应该是element-ui自身封装了一层div在input标签外面,把原来的事件隐藏了,所以如下代码运行是无响应的: <el ...
- vue.js 键盘enter事件的使用
在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -- ...
- React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)
import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...
- vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件
vue教程1-05 事件 简写.事件对象.冒泡.默认行为.键盘事件 v-on:click/mouseover...... 简写的: @click="" 推荐 事件对象: @clic ...
- Vue 键盘事件
Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...
随机推荐
- 前端学习 C 语言 —— GDB调试器
GDB调试器 我们在讲指针时用 GDB 调试段错误. 本篇将详细介绍 gdb 的最常用命令.日志记录.检测点,最后介绍如何用 gdb 调试进程以及用gdb 调试一个开源项目的调试版本 -- glmar ...
- C语言。格式化符号
%s 输出字符串 %d 输出整形数字 %f 输出浮点数数字 %c 输出字符 %x 输出16进制 %04d 输出长度固定的整形数字(0001,0002,....)
- 微信小程序 WXSS模板样式，全局和页面配置，网络请求
[黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)] https://www.bilibili.com/video/BV1834y1676 ...
- Unity UGUI的Mask（遮罩）组件的介绍及使用
Unity UGUI的Mask(遮罩)组件的介绍及使用 1. 什么是Mask组件? Mask(遮罩)组件是Unity UGUI中的一个重要组件,用于限制子对象的可见区域.通过设置遮罩组件,可以实现一些 ...
- Windows电脑环境变量（用户变量、系统变量）的修改
本文介绍在Windows 10操作系统中,进行用户变量.系统变量等两种环境变量的新建.修改与删除的详细方法. 在很多时候,我们需要对Windows电脑的环境变量加以修改,例如安装一些专业软件. ...
- (五) MdbCluster分布式内存数据库——数据迁移架构及节点扩缩容状态图
(五) MdbCluster分布式内存数据库--数据迁移架构及节点扩缩容状态图 上一篇:(四) MdbCluster分布式内存数据库--业务消息处理 本节主要讨论在系统扩容期间的数据迁移架构及节点的状 ...
- Linux 命令：lsof
参考文档:lsof命令详解 lsof,列出系统中所有打开的文件. 各列字段意义如下: COMMAND: 进程的名称 PID: 进程标识符 USER: 进程所有者 FD: 文件描述符,应用程序通过文件描 ...
- 树形DP + 换根DP
树形DP--基础 P1352 没有上司的舞会 设 \(f[i][0/1]\) 表示第 \(i\) 个人不去或者去. 如果第 \(i\) 个人没去,那么下属可去可不去,所以 \(f[i][0] = \s ...
- 使用 RediSearch 在 Redis 中进行全文检索
原文链接: 使用 RediSearch 在 Redis 中进行全文检索 Redis 大家肯定都不陌生了,作为一种快速.高性能的键值存储数据库,广泛应用于缓存.队列.会话存储等方面. 然而,Redis ...
- JDK中「SPI」原理分析
目录 一.SPI简介 1.概念 2.入门案例 2.1 定义接口 2.2 两个实现类 2.3 配置文件 2.4 测试代码 二.原理分析 1.ServiceLoader结构 2.iterator迭代方法 ...