Vue2键盘事件：keydown/keyup...
Vue2键盘事件：keydown/keyup...
1.使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="vue.js"></script> <script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'#box',
methods:{
show:function(ev){
if(ev.keyCode == 13){
alert('你按回车键了');
}
},
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="text" placeholder="请输入" @keyup="show($event)"> <input type="text" placeholder="请输入" @keyup.13="show($event)">
</div>
</body>
</html>
当按下键盘的时候，执行show方法，然后再去执行相应的业务。
两个input的效果都是一样的 如果安13 也就是按键 enter 才会执行弹窗！！
@keyup.13 回车
@keyup.enter 回车
@keyup.left 左键
@keyup.right 右键
@keyup.up 上键
@keyup.down 下键
@keyup.delete 删除键
Vue2键盘事件：keydown/keyup...的更多相关文章
- 键盘事件keydown、keypress、keyup随笔整理总结（摘抄）
原文1:http://www.cnblogs.com/silence516/archive/2013/01/25/2876611.html 原文2:http://www.cnblogs.com/leo ...
- 详解键盘事件(keydown，keypress，keyup)
一.键盘事件基础 1.定义 keydown:按下键盘键 keypress:紧接着keydown事件触发(只有按下字符键时触发) keyup:释放键盘键 顺序为:keydown -> keypre ...
- Vue2键盘事件
这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1 ...
- 键盘事件keydown、keypress、keyup随笔整理总结
英文输入法: 事件触发顺序:keydown - > keypress - > keyup 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chr ...
- 键盘事件keydown、keypress、keyup
事件触发顺序:keydown - > keypress - > keyup 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chrome:输入触发k ...
- 无线端不响应键盘事件(keydown,keypress,keyup)
今天在项目时,在android手机上使用输入法的智能推荐的词的话,不会触发keyup事件,一开始想到在focus时使用一个定时器,每隔100ms检测输入框的值是否发生了改变,如果改变了就作对应的处理, ...
- 键盘事件（keyup、keydown、keypress）
1.onkeyup 和onkeydown时,keyCode是不区分大小写的,会将小写字母自动转化为大写字母. 2 onkeypress时,区分大小写. 3兼容event.keyCode||event. ...
- Vue2学习笔记:键盘事件
Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...
- Vue 键盘事件
Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...
随机推荐
- codeM 2018 资格赛
比赛链接:https://www.nowcoder.com/activity/2018codem/index?from=meituan 1.下单 给定若干商品,可以选择打折.满减两种方式. #incl ...
- 最新CoreData封装Demo
1.创建CoreData文件 2. 3. 4. UploadCoreDataAPI.h // // UploadCoreDataAPI.h // dsafsda // // Created by 冯敏 ...
- Linux主要shell命令详解(上)
[摘自网络] kill -9 -1即实现用kill命令退出系统 Linux主要shell命令详解 [上篇] shell是用户和Linux操作系统之间的接口.Linux中有多种shell,其中缺省使用的 ...
- MySQL安装Altas
准备工作:需要先把MySQL主从配置好. 0.下载altas:打开https://github.com/Qihoo360/Atlas/releases wget https://github.com/ ...
- spring 定时任务执行两次解决办法
在web.xml中同时配置了ContextLoaderListener和DispatcherServlet?假如真是这样的话,需要删掉一个配置,因为你相当于配置了两个spring容器,两个容器分别都执 ...
- 安卓sdk安装慢解决办法
1.上图SDK Manager 的 Tools ->Options打开SDK Manager的Settings, 选中“Force https://… sources to be fetched ...
- mac mini 制作fusion drive 的方法
下载yosemite,格式化磁盘,运行如下命令,制作os x 启动盘 sudo /Applications/Install\ OS\ X\ Yosemite.app/Contents/Resour ...
- MySQL中 optimize table '表名'的作用
语法: optimize table '表名' 一,原始数据 1,数据量 2,存放在硬盘中的表文件大小 3,查看一下索引信息 索引信息中的列的信息说明. Table :表的名称.Non_unique: ...
- Debian 8 设置时区和时间配置
一.设置时区 1. 执行 tzselect 2. 弹出洲级地域选项: Please identify a location so that time zone rules can be set cor ...
- 一个简单的增强型PHP curl函数
啥都不说,先上代码 <?PHP /* * @author 小伍 */ echo "<pre>"; $proxy = array('url'=>'http:/ ...