Vue键盘事件用法总结

2019-11-19 16:47:59

字体：大中小

来源：转载

供稿：网友

这两天学习了Vue.js 感觉组件这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记,学习一下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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：详解vue-router基本使用

下一篇：javascript实现日期三级联动下拉框选择菜单