vue 键盘事件keyup/keydoen
使用：
<!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>
当你按下键盘，键盘的值为13的时候，将会执行show函数方法
以上两种keyup和keyup.13方法是一样的，点击回车按键，就会执行 alert 方法
一些便捷方式：
@keyup.13 回车
@keyup.enter 回车
@keyup.left 左键
@keyup.right 右键
@keyup.up 上键
@keyup.down 下键
@keyup.delete 删除键
vue 键盘事件keyup/keydoen的更多相关文章
- Vue 键盘事件
Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...
- Vue键盘事件
键盘事件一 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- IOS中input键盘事件keyup 的兼容解决办法
用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中很慢,用输入法输入之后,并未立刻相应keyup事件. 解决办法: 在ios设备上可以用html5的input事件 ...
- vue学习笔记（一）关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- 关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- vue 的事件冒泡
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- Vue2键盘事件
这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 1 ...
- IOS中input键盘事件支持的解决方法
欢迎大家去我的网站详细查看http://genghongshuo.com.cn/ IOS中input键盘事件keyup.keydown.等支持不是很好, 用input监听键盘keyup事件,在安卓手机 ...
- jQuery如何使用键盘事件，按住空格键完成进度条效果，并终止键盘事件
jQuery使用键盘事件 keyup:键盘抬起时 keydown:键盘按下时 keypress:键盘按住时 运行下列代码,可以看效果 $(document).keyup(function () { c ...
随机推荐
- find 删除日志文件
find 命令删除日志文件 find ./my_dir -mtime +10 -type f -delete EXPLANATIONS ./my_dir your directory (replace ...
- Effective C++ 总结笔记（三）
三.资源管理 13．以对象管理资源 1.为了防止资源泄漏,请使用RAII对象,在构造函数里面获得资源,并在析构函数里面释放资源. 2. 引用计数型智慧指针(RCSP):持续追踪多少个指针指向该资源,无 ...
- Python进阶（装饰器）
from datetime import datetime def log(func):#func表示装饰器作用于的函数 def wrapper(*args,**kw):#wrapper返回装饰器作用 ...
- Python | Python语法基础
目录 前言 1. 变量与简单数据结构 2. 列表相关 3. 集合 4. If语句 5. 字典 6. 用户输入和while循环 7. 函数 8. 类与对象 9. 文件 10. 异常 11. 测试 最后 ...
- 【linux系统】命令学习（七）进阶命令 curl jq
curl 支持dict file ftp ftps gopher http https imap 1.实现代理 curl -x 129.3.3.3:8888 https://baidu.com 2.g ...
- C#练习2
using System;class Class1{ public int vlaue = 0;}class Test{ static void Main() { int v1 = 0; int v2 ...
- [uoj76]懒癌
为了方便,称患有懒癌的狗为"坏狗" 记$Q_{i}$为第$i$个人能观察的狗集合,$S$为坏狗集合,那么第$k$天第$i$个人能得到的信息有且仅有$S\ne \empty$.$S\ ...
- [hdu6349]三原色图
考虑分别求出RG和GB的最小生成树,然后剩下的边中肯定选择较小的边加入这两颗生成树 1 #include<bits/stdc++.h> 2 using namespace std; 3 # ...
- 【Tool】IDEA功能--SVN和Git
IDEA功能--SVN和Git 2019-11-08 21:12:22 by冲冲 1.IDEA的SVN (1)提交项目代码到SVN服务器 ① 指定不用上传的目录 ② 设置项目上传的路径 SVN服务 ...
- Codeforces 1236F - Alice and the Cactus（期望+分类讨论）
Codeforces 题面传送门 & 洛谷题面传送门 期望好题. 首先拆方差: \[\begin{aligned} &E((x-E(x))^2)\\ =&E(x^2)-2E(x ...