vue教程：键盘事件v-on:keyup、v-on:keydown、@keyup、@keydown-马育民老师

# 键盘事件

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>
```

原文出处：http://malaoshi.top/show_1IX2bZFRguWI.html