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 ...
随机推荐
- JavaScript调用App原生代码(iOS、Android)通用解决方案
实际场景 场景:现在有一个H5活动页面,上面有一个登陆按钮,要求点击登陆按钮以后,唤出App内部的登录界面,当登录成功以后将用户的手机号返回给H5页面,显示出来.这个场景应该算是比较完整的一次H5中的 ...
- BAT面试的准备—iOS篇
本文主要用于记录在准备BAT面试中关于iOS遇到的问题和做一些相关面试题的笔记 iOS网络层设计 1.网络层和业务层的对接设计 使用哪种交互模式来和业务层对接 : 使用Delegate为主,目的是为了 ...
- IT软件外包行业深入分析:现状、前途、趋势、待遇 什么是软件外包 外包公司是怎么工作的 软件外包公司的面试 软件外包公司需要什么样的人
目录: [0] - 为什么要对大学生谈软件外包? [1] - 什么是软件外包? [2] - 软件为什么要外包? [3] - 为什么要承接软件外包 [4] - 做软件外包有前途吗? [5] - 外包公司 ...
- symbolicatecrash App Bug 分析工具
1.symbolicatecrash 简介 symbolicatecrash 是一个 Xcode 自带解析 iOS Crash 文件的工具. 其它下载地址 symbolicatecrash,密码:6p ...
- ASP.NET实现二维码 ASP.Net上传文件 SQL基础语法 C# 动态创建数据库三(MySQL) Net Core 实现谷歌翻译ApI 免费版 C#发布和调试WebService ajax调用WebService实现数据库操作 C# 实体类转json数据过滤掉字段为null的字段
ASP.NET实现二维码 using System;using System.Collections.Generic;using System.Drawing;using System.Linq;us ...
- Oracle 12C -- plug unplugged PDB into CDB
connetct to CDB as a common user and verify that pdb_test is closed SQL> select con_id,dbid,name, ...
- Android Notification 的声音和震动
我们在Android系统发送一条Notification的时候,经常需要通过震动或声音来提醒用户.如何为Notification设置声音和震动了.大致思路有: - AndroidNotificatio ...
- 恢复Ext3下被删除的文件
下面是这个教程将教你如何在Ext3的文件系统中恢复被rm掉的文件. 假设我们有一个文件名叫 ‘test.txt’ $ls -il test.txt 15 -rw-rw-r– 2 root root ...
- 8个实用而有趣Bash命令提示行
很多人都对过命令行提示的重要性不屑一顾,甚至是一点都不关心.但是我却一点都不这么认为,一个好的命令行提示可以改变你使用命令的方式.为此,我在internet上找到一些非常实用,优秀,并有趣的bash的 ...
- Android数据库安全解决方案,使用SQLCipher
源码:http://files.cnblogs.com/android100/SQLCipherTest.rar 我们都知道,Android系统内置了SQLite数据库,并且提供了一整套的API用于对 ...