键盘事件

vue 通过 v-on 可以获取键盘事件，如下：

• v-on:keyup：键盘按下事件

• v-on:keydown：键盘按下并弹起事件

简化写法：

• @keyup：键盘按下事件

• @keydown：键盘按下并弹起事件

简单例子

获取输入框中的值

<div id="app">
    第一个输入框：<input type="input" v-on:keyup="show" value=""><br>
    第二个输入框：<input type="input" @keyup="show" value="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
    el: '#app',
    methods:{ 
        show:function(event){
            //获取按键内容，按键值（键盘上的编号）
            console.log(event.target.value+"--"+event.keyCode)
        }
    }
})
</script>

判断回车事件

可以通过 keyCode 判断回车

<div id="app">
    <input type="input" @keyup="show" value=""><br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
    el: '#app',
    methods:{ 
        show:function(event){
            if(event.keyCode==13){//通过keyCode判断
                console.log(event.target.value)
            }
        }
    }
})
</script>

键盘修饰符

通过 键盘修饰符，可以更简单的实现 监听 常用的按键事件：

• .enter 监听回车
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space 空格
• .up
• .down
• .left
• .right

例子

在输入框，输入内容，敲回车，在控制台中打印该内容

<div id="app">
    按键修饰符判断回车：<input type="input" @keyup.enter="show" value="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
    el: '#app',
    methods:{
        show:function(event){
            console.log(event.target.value)
        }
    }
})
</script>