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 ...
随机推荐
- Logistic Regression and its Maximum Likelihood Estimation
从 Linear Regression 到 Logistic Regression 给定二维样本数据集 \(D = \left\{ (\vec{x}_{1}, y_{1}), (\vec{x}_{2} ...
- Nginx使用Lua脚本连接Redis验证身份并下载文件
目录 安装Nginx 下载 解压安装包 安装依赖 安装 启动 测试访问 安装LuaJIT 安装ngx_devel_kit 安装lua-nginx-module 在已安装的Nginx中添加Lua模块 L ...
- 即构SDK8月迭代：新增下行网络测速、切换房间、预览首帧回调等多项功能
即构SDK8月上新,网络探测模块新增下行网络测速.媒体播放器新增缓存到文件结尾的回调.新增切换房间功能.新增预览首帧回调等.本月SDK迭代新上线的功能非常丰富,详细内容请看下文. LiveRoom 新 ...
- 【技术积累】Java中的常用类【一】
Math类 Math类是Java中的一个数学工具类,提供了一系列常用的数学方法.下面是Math类的常用方法及其案例: abs() 返回一个数的绝对值. int num = -10; int absNu ...
- Nextcloud允许不被信任的域访问 取消 trusted domains
在服务器部署了Nextcloud,由于测试需要,经常从不同的地址访问,但是每次访问都要把域名添加到受信任域,反反复复修改也挺麻烦,暂时又没找到通配符或者禁用的方法. 不过网上提供了一个替代方法,动态生 ...
- upload-libs通关攻略
pass01 第一关是一个前端验证,只要把Javascript禁止再上传就可以绕过了. 上传成功,到上传的地址查看结果如下: pass-02 这是一个MIME绕过,用bp抓包后修改文件类型即可将下面这 ...
- Oracle11gR2单实例的安装与部署
1 安装目标与规划 交易系统1台HP DL580 G9服务器将安装Oracle11gR2 . 1.1 安装介质版本 主机名 his1 IP地址 192.168.40.102(非生产环境ip) O ...
- linux测试ipv6
前言 操作系统版本:centos 7.6 curl版本:7.87(centos 7自带的curl版本是7.29,测ipv6会有问题) 系统开启ipv6 centos 7默认开启 ipv6,可检查net ...
- [ansible]简介安装入门
简介 ansible是一种运维自动化工具,默认通过ssh协议管理机器.只需要在一台机器上安装好,就可以通过这台电脑管理一组远程的机器.而被管理的linux机器只要有python环境,就不需要额外安装a ...
- openssh傻瓜式一键自动化更新脚本（ubuntu系统）
鉴于openssh升级太过麻烦,这里自制了一个openssh自动化升级脚本,以root权限一键运行脚本即可: sh openssh-update.sh 注意:这里只使用于ubuntu系统,centos ...