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 ...
随机推荐
- M1配置php环境完整版(用于M1芯片的Mac中,php开发环境,比如wordpress、"或wp"、emlog pro、typecho等本地开发环境的配置)
因为macbook发布的M1是基于arm架构的,导致很多软件在短时间没无法兼容,其中包括php的很多集成开发环境软件.于是需要手动配置.网上的信息也是零七八碎,故制作了这个完整的教程. 本教程基于的m ...
- 在随着layui官网下架后 layui镜像站起来了
layui:https://gitee.com/lh_yun/layui 介绍 layui镜像站 「本站仅为 layui 文档保留的镜像站点,与官方无关」 源码地址 在线 pdf 1.主页 https ...
- Node常用内置模块
node内置的fs模块就是文件系统模块,负责读写文件 fs同时提供了同步异步的方法 'use strict'; var fs = require('fs'); fs.readFile('test.tx ...
- rsyslog配置解析
本地Rsyslog版本: 8.25.0-1.el6.x86_64 配置 基本语法 Rsyslog 现在支持三种配置语法格式: sysklogd legacy rsyslog RainerScript ...
- 从0到1使用Kubernetes系列(八):Kubernetes安全
本文是从 0 到 1 使用 Kubernetes 系列第八篇,上一篇从0到1使用Kubernetes系列(七):网络介绍了 K8S 网络相关的内容,本文将带你了解 K8S 的安全问题. Kuberne ...
- [cf1396E]Distance Matching
根据$dis(x,y)=d[x]+d[y]-2d[lca(x,y)]$,由于所有点都出现了1次,距离即$\sum_{i=1}^{n}d_{i}-2\sum d[lca(x,y)]$(以下假设根深度为0 ...
- 解决:ElasticsearchException[X-Pack is not supported and Machine Learning is not available for
解决:在config/elasticsearch.yml添加一条配置: xpack.ml.enabled: false 能启动了就. 在docker安装出现这个问题,目前还没解决. 算了用win10得 ...
- 深入理解Redis 数据结构—简单动态字符串sds
Redis是用ANSI C语言编写的,它是一个高性能的key-value数据库,它可以作用在数据库.缓存和消息中间件.其中 Redis 键值对中的键都是 string 类型,而键值对中的值也是有 st ...
- [源码解析] PyTorch 分布式 Autograd (3) ---- 上下文相关
[源码解析] PyTorch 分布式 Autograd (3) ---- 上下文相关 0x00 摘要 我们已经知道 dist.autograd 如何发送和接受消息,本文再来看看如何其他支撑部分,就是如 ...
- FVCOM泥沙模块河流边界处理
简介 入流河流携带泥沙可以按照节点和边界两种形式给定,这两种方法都是在相关的节点上进行直接赋值,并不能保证进入计算域内泥沙总体积. 相关设置 XX_run.nml 河流参数设置 &NML_RI ...