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 ...
随机推荐
- Jenkins执行 remote SSH 命令
1.安装 SSH Pipeline Steps 插件 2.在凭据中添加remote server凭据,如下 3.Pipeline编写: def GetRemoteServer(ip){ def rem ...
- 《Python语言程序设计》【第3周】基本数据类型
实例3:天天向上的力量 #DayDayUpQ1.py dayup = pow(1.001,365) daydown = pow(0.999,365) print("向上: {:.2f},向下 ...
- 在vs2017和vs2019下发布应用之Windows程序打包-附图标修改和默认安装路径定义全教程
title: 在vs2017和vs2019下发布应用之Windows程序打包-附图标修改和默认安装路径定义全教程 date: 2020-04-25 sidebarDepth: 2 tags: wind ...
- linux python2.6.6升级到python2.7
升级 python 2.6.6 系统到 2.7.10 版本 CentOS 6 系统默认 Python 版本是:2.6.6 平时在使用中遇到很多的库要求是 2.7.x 版本的库,比如使用 ConfigP ...
- [hdu6987]Cycle Binary
定义$x$为$s$的周期,当且仅当$\forall 1\le i\le |s|-x,s_{i}=s_{i+x}$(字符串下标从1开始) 令$per(s)$为$s$的正周期构成的集合,$\min p ...
- FastJson测试用例
基础测试 package com.ai; import com.ai.test.daily.Student; import com.alibaba.fastjson.JSON; import com. ...
- 直接插入100w数据报错
### Cause: com.mysql.cj.jdbc.exceptions.PacketTooBigException: Packet for query is too large (77,600 ...
- Hi3516开发笔记（四）：Hi3516虚拟机编译uboot、kernel、roofts和userdata以及分区表
若该文为原创文章,转载请注明原文出处本文章博客地址:https://hpzwl.blog.csdn.net/article/details/121572767红胖子(红模仿)的博文大全:开发技术集合( ...
- SpringCloud升级之路2020.0.x版-42.SpringCloudGateway 现有的可供分析的请求日志以及缺陷
本系列代码地址:https://github.com/JoJoTec/spring-cloud-parent 网关由于是所有外部用户请求的入口,记录这些请求中我们需要的元素,对于线上监控以及业务问题定 ...
- x86汇编反编译到c语言之——(2)if语句
一. 测试的C语句及编译后的x86汇编代码 int a; int b; int main(void) { int c; if (c) a = 4; else b = 5; return 0; } 1 ...