Vue2键盘事件
这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件
键盘事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title></title> <script src= "../js/Vue.js" charset= "utf-8" ></script> <script type= "text/javascript" > window.onload = function () { var vm = new Vue({ el: '#box' , data: {}, methods: { show: function (ev) { alert(ev.keyCode) } } }); } </script> </head> <body> <div id= "box" > <input type= "text" @keydown= "show($event)" > </div> </body> </html> |
keyCode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title></title> <script src= "../js/Vue.js" charset= "utf-8" ></script> <script type= "text/javascript" > window.onload = function () { var vm = new Vue({ el: '#box' , data: {}, methods: { show: function (ev) { if (ev.keyCode==13){ alert( '你按了回车键!' ) } } } }); } </script> </head> <body> <div id= "box" > <input type= "text" @keyup= "show($event)" > </div> </body> </html> |
keyUp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title></title> <script src= "../js/Vue.js" charset= "utf-8" ></script> <script type= "text/javascript" > window.onload = function () { var vm = new Vue({ el: '#box' , data: {}, methods: { show: function (ev) { alert(ev.keyCode) } } }); } </script> </head> <body> <div id= "box" > <input type= "text" @keyup= "show($event)" > </div> </body> </html> |
键盘事件——简写方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title></title> <script src= "../js/Vue.js" charset= "utf-8" ></script> <script type= "text/javascript" > window.onload = function () { var vm = new Vue({ el: '#box' , data: {}, methods: { show: function () { alert( '你按了回车!' ); }, show2: function () { alert( '你按了回车!' ); }, show3: function () { alert( '你按了上键!' ); }, show4: function () { alert( '你按了下键!' ); }, show5: function () { alert( '你按了左键!' ); }, show6: function () { alert( '你按了右键!' ); } } }); } </script> </head> <body> <div id= "box" > <input type= "text" @keyup.13= "show()" > <hr> <input type= "text" @keyup.enter= "show2()" > <hr> <input type= "text" @keyup.up= "show3()" > <hr> <input type= "text" @keyup.down= "show4()" > <hr> <input type= "text" @keyup.left= "show5()" > <hr> <input type= "text" @keyup.right= "show6()" > <hr> </div> </body> </html> |
Vue2键盘事件的更多相关文章
- Vue2键盘事件:keydown/keyup...
Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...
- Vue2学习笔记:键盘事件
Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...
- Vue 键盘事件
Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...
- vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- 关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- html中键盘事件----在路上(16)
键盘事件,这里以onkeyup为例: 解析:当在一个input中输入文本时,在另一个div中输出文本 在下面是本人写的小demo,供分享. 代码如下: <!DOCTYPE html> &l ...
- js键盘事件和焦点事件
键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...
- 深入理解DOM事件类型系列第二篇——键盘事件
× 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...
- jquery键盘事件总结
在工作中在发现同事在写输入密码按键的相关js效果时,发现自己对于这块很是不了解,这几天特地了解了一下,进行以下总结: 一.首先要知道键盘事件的几个属性: 1.keydown():在键盘按下时触发. 2 ...
随机推荐
- html锚点定位不准确问题
问题描述 当顶部固定时,点击锚点,会跳转到锚点以下. <style> #one,#two,#three{ height: 500px; } #top{ position: fixed; h ...
- Linux下Setuid命令! 转载
Linux下Setuid命令! 转载 在Linux系统中每个普通用户都可以更改自己的密码,这是合理的设置. 问题是:用户的信息保存在文件/etc/passwd中,用户的密码保存在文件/etc/sha ...
- 完善_IO, _IOR, _IOW, _IOWR 宏的用法与解析
_IO, _IOR, _IOW, _IOWR 宏的用法与解析 原文地址:http://www.eefocus.com/ayayayaya/blog/12-03/245777_20cdd.html 作 ...
- [AaronYang风格]微软Unity2.X系统学习笔记,记录
读者约定: Unity我直接简写U了 Unity Dependency Injection(DI) 欢迎学习Unity,通过学完下面的几个流程的引导,你应该就可以很顺利的应用Unity到你的项目中去了 ...
- ext2文件系统 - mke2fs
上一遍博文的重点其实将ext2整体的组织框架,我们知道了ext2文件系统由块组组成,每个块组里面的组织形式.我们甚至直接把超级块和组描述符里面的内容,用十六进制形式展现了出来.这篇博文主要讲述如何 ...
- 你的应用是怎样被替换的,App劫持病毒剖析
一.App劫持病毒介绍 App劫持是指运行流程被重定向,又可分为Activity劫持.安装劫持.流量劫持.函数运行劫持等. 本文将对最近利用Acticity劫持和安装劫持的病毒进行分析. 二.Acti ...
- sql用逗号连接多张表对应哪个join?
转自:http://blog.csdn.net/huanghanqian/article/details/52847835 四种join的区别已老生常谈: INNER JOIN(也可简写为JOIN): ...
- Android开发:setAlpha()方法和常用RGB颜色表----颜色, r g b分量数值(int), 16进制表示 一一对应
杂家前文Android颜色对照表只有颜色和十六进制,有时候需要设置r g b分量的int值,如paint.setARGB(255, 127, 255, 212);就需要自己计算下分量的各个值.这里提供 ...
- [转]Java并发编程:线程池的使用
Java并发编程:线程池的使用 在前面的文章中,我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了, ...
- git概念及工作流程详解
git概念及工作流程详解 既然我们已经把gitlab安装完毕[当然这是非必要条件],我们就可以使用git来管理自己的项目了,前文也多多少少提及到git的基本命令,本文就先简单对比下SVN与git的区别 ...