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 ...
随机推荐
- linux磁盘空间查看
du -h --max-depth=1 du -sh df -h
- Qt概要
Qt是面向对象的框架,使用特殊的代码生成扩展以及一些宏.是一个跨平台的C++图形用户界面.它是一款可以轻松的帮我们做界面的软件. Qt是1991年奇趣科技公司(2008 年 6 月被诺基亚收购)开发的 ...
- 在Jenkins中执行 PowerShell 命令实现高效的CD/CI部署
相比于cmd,powershell支持插件.语法扩展和自定义扩展名,是智能化部署中闪闪的新星,越来越多的开发者偏爱使用Powershell. 如何让Jenkins支持Powershell呢?本文即展开 ...
- N体模拟数据可视化 LightningChart®
N体模拟数据可视化 LightningChart N体模拟也许是目前最先进的数据可视化类型之一.事实上,我们现在谈论的不再是以商业为中心的传统数据的可视化,现在它甚至超越了比如振动分析等先进数据源 ...
- CodeBlocks调试器缺少（gdb.exe）文件
错误如下: Building to ensure sources are up-to-date Selecting target: Debug ERROR: You need to specify ...
- PaintHouse II
// // Created by Administrator on 2021/7/27. // #ifndef C__TEST01_PAINTHOUSE_HPP #define C__TEST01_P ...
- vscode 整理————开篇之力(一)
前言 作为一个开发为什么对一个vscode 这样的工具进行整理呢,因为vscode 非常的常用,它包含很多编辑器共同有的特征,这些特征帮助我们了解其他编辑器. 这里可能就有人疑问了,我们需要去非常的关 ...
- Codeforces 1276F - Asterisk Substrings（SAM+线段树合并+虚树）
Codeforces 题面传送门 & 洛谷题面传送门 SAM hot tea %%%%%%% 首先我们显然可以将所有能够得到的字符串分成六类:\(\varnothing,\text{*},s, ...
- JSOI 2008 最小生成树计数
JSOI 2008 最小生成树计数 今天的题目终于良心一点辣 一个套路+模版题. 考虑昨天讲的那几个结论,我们有当我们只保留最小生成树中权值不超过 $ k $ 的边的时候形成的联通块是一定的. 我们可 ...
- Pandas 简介
Pandas 简介 pandas 是 python 内基于 NumPy 的一种工具,主要目的是为了解决数据分析任务.Pandas 包含了大量库和一些标准的数据模型,提供了高效地操作大型数据集所需的工具 ...