Vue2键盘事件：keydown/keyup... - Lonely,lonelyBurning - 博客园

安宇雨 - 随手采集
2018-10-13 21:03:03
随手采集
0000-未整理-等待研究

Vue2键盘事件：keydown/keyup...

1.使用

; "复制代码")

复制代码

<!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方法，然后再去执行相应的业务。

两个input的效果都是一样的如果安13 也就是按键 enter 才会执行弹窗！！

@keyup.13 回车

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

@keyup.delete 删除键