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 ...
随机推荐
- CentOS vps下,安装xfce/KDE/GNOME桌面+vncserver进行远程管理
CentOS vps下,安装xfce/KDE/GNOME桌面+vncserver进行远程管理 首先安装桌面环境,我选择的是xfce,轻量级桌面,小巧实用不占太多内存,(占用内存方面,xfce少于kde ...
- 获取客户机的ip和mac地址
只获取clientIP package com.ppms.utils; import javax.servlet.http.HttpServletRequest; /** * Created by l ...
- 【DeepLearning】Exercise:PCA in 2D
Exercise:PCA in 2D 习题的链接:Exercise:PCA in 2D pca_2d.m close all %%=================================== ...
- linux下的工作模型以及Nginx工作原理
Web服务器主要任务就是处理来自客户端的请求,一般情况下Web服务器处理并发连接请求的工作模型有以下几种方式: 1.单线程web服务器(Single-threaded web servers) 此 ...
- Linux下mysql的远程连接(转)
转载:http://www.cnblogs.com/fnlingnzb-learner/p/5830661.html 如果Mysql是按上篇的方法进行安装和设置的话,那进行远程连接就会稍微简单一点.我 ...
- 【Oracle】详解Oracle中的序列
序列: 是oacle提供的用于产生一系列唯一数字的数据库对象. 自动提供唯一的数值 共享对象 主要用于提供主键值 将序列值装入内存可以提高访问效率 创建序列: 1. 要有创建序列的权限 create ...
- Javscript调用iframe框架页面中函数的方法
Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].h ...
- Fiddler基础用法-抓取浏览器数据包
Fiddler基础知识 Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888,我们也可以通过设置进行修改. 代理就是在 ...
- 10.翻译:EF基础系列---EF中的持久性
原文链接:http://www.entityframeworktutorial.net/EntityFramework4.3/persistence-in-entity-framework.aspx ...
- 码字工作者的发文姿势—— 用MWeb+Markdown Here+七牛 轻松实现多平台发布
码字工作者的发文姿势—— 用MWeb+Markdown Here+七牛 轻松实现多平台发布 1.对于写作你最头疼什么 对于大多数码字工作者来说,随时随地记录灵感,构思文章,集中书写,其实是一件令人 ...