vue教程:键盘事件v-on:keyup、v-on:keydown、@keyup、@keydown

键盘事件

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

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

  • v-on: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>

原文出处:https://malaoshi.top/show_1IX2bZFRguWI.html