键盘事件

来源：互联网发布：期刊论文数据造假编辑：程序博客网时间：2024/05/29 10:17

<!DOCTYPE html><html><head>    <title></title>    <meta charset="utf-8">    <script src="http://unpkg.com/vue/dist/vue.js"></script>    <script type="text/javascript">        window.onload = function(){            var vm = new Vue({                el:'#box',                methods:{                    show:function(){                        alert(1);                        //event.cancelBubble = true;                    },                }            });        }    </script></head><body>    <div id="box">        <input type="text" placeholder="请输入" @keydown="show()">     </div></body></html>

只要摁下键盘上任何一个键，就会执行show()方法。
同样，要想拿到键码，只需要传入event对象：

    <div id="box">        <input type="text" placeholder="请输入" @keydown="show($event)">     </div>

                    show:function(ev){                        alert(ev.keyCode); //弹出键码                    },

除了keydown事件，还有keyup：

<!DOCTYPE html><html><head>    <title></title>    <meta charset="utf-8">    <script src="http://unpkg.com/vue/dist/vue.js"></script>    <script type="text/javascript">        window.onload = function(){            var vm = new Vue({                el:'#box',                methods:{                    show:function(ev){                        if(ev.keyCode == 13){                            alert('你按回车键了');                        }                    },                }            });        }    </script></head><body>    <div id="box">        <input type="text" placeholder="请输入" @keyup="show($event)">     </div></body></html>

上面的逻辑是：只有在回车的时候有效。这个业务逻辑还有其他实现方式：

    <div id="box">        <input type="text" placeholder="请输入" @keyup.13="show($event)">     </div>

                    show:function(ev){                        alert('你按回车键了');                    },

还有

@keyup.13 回车@keyup.enter 回车@keyup.left 左键@keyup.right 右键@keyup.up 上键@keyup.down 下键@keyup.delete 删除键......

0 0