Vue2中的键盘事件

最新推荐文章于 2024-06-22 15:54:23 发布

愤怒的小青春

最新推荐文章于 2024-06-22 15:54:23 发布

阅读量434

点赞数

分类专栏：日常笔记文章标签： vue 键盘事件

日常笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue2键盘事件：keydown/keyup

使用：

    <!DOCTYPE html>  
    <html>  
    <head>  
        <title></title>  
        <meta charset="utf-8">  
        <script src="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)">   
      
            <input type="text" placeholder="请输入" @keyup.13="show($event)">  
        </div>  
    </body>  
    </html>

当按下键盘的时候，执行show方法，然后再去执行相应的业务。

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