Vue键盘事件用法总结
内容摘要
这篇文章主要为大家详细介绍了Vue键盘事件用法总结,具有一定的参考价值,可以用来参考一下。
对此感兴趣的朋友,看看idc笔记做的技术笔记!
这两天学习了Vue.js 感觉组件这个地方
对此感兴趣的朋友,看看idc笔记做的技术笔记!
这两天学习了Vue.js 感觉组件这个地方
文章正文
这篇文章主要为大家详细介绍了Vue键盘事件用法总结,具有一定的参考价值,可以用来参考一下。
对此感兴趣的朋友,看看idc笔记做的技术笔记!
这两天学习了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 27 28 29 | <code> <!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> </code> |
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 29 30 31 | <code> <!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> </code> |
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 27 28 29 | <code> <!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> </code> |
键盘事件——简写方式
代码如下:
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 53 | <code> <!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></code> |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持php教程。
注:关于Vue键盘事件用法总结的内容就先介绍到这里,更多相关文章的可以留意
代码注释