這兩天學(xué)習(xí)了Vue.js 感覺組件這個(gè)地方知識點(diǎn)挺多的，而且很重要，所以，今天添加一點(diǎn)小筆記,學(xué)習(xí)一下Vue鍵盤事件
鍵盤事件
<!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
<!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
<!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>鍵盤事件――簡寫方式
<!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>以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
