Vue2键盘事件
Posted Lonely existence, lonely burni
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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> 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键盘事件的主要内容,如果未能解决你的问题,请参考以下文章