键盘事件

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

v-on:keydown：键盘按下事件，不能获取当前按下字母，可以获取上一次的内容
v-on:keyup：键盘按下并弹起事件，可以获取当前按下的内容（搜索引擎提示）

简化写法：

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

简单例子

获取输入框中的值

<div id="app">
    按键按下：<input type="input" @keydown="show" value=""><br>
    按键弹起：<input type="input" v-on: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){
            // event.target.value获取按下前的内容
            // event.keyCode、e.key 获取按下的 键盘编号，按键字符
            console.log(event.target.value+"--"+event.keyCode,e.key)
        }
    }
})
</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>

原文出处：/show_1IX2bZFRguWI.html