vue之按键事件与修饰符

目录

按键事件

按键事件就是，按了键盘的一个按键，就会触发绑定函数的执行。

按键 说明
keyup 按键弹起的时候触发（最常用）
keydown 按键按下的时候触发
keypress 按键按压的时候触发

语法

# 在标签上进行定义
@keyup="函数"
@keydown="函数"
@keypress="函数"

示例

<body>
<div id="app">
    <!--keyup绑定一个func-->
    <input type="text" v-model="mytext" @keyup="keyupFunc"><span>---->{{mytext}}</span>

</div>
</body>
<script>
    vm=new Vue({
        el: '#app',
        data:{
            mytext:'',
        },
        methods:{
            keyupFunc(event){
                // event.key可以看到按下的是哪个按键
                // event.keyCode可以看到按键对应的code，这样就可以按code进行判断按键是否被按下
                console.log('按下的按键是：', event.key,'这个按键对应的code是:', event.keyCode)
                if (event.keyCode === 13){
                    console.log('您按下了回车')
                }
            }
        }
    })
</script>

按键修饰符

上面的示例如果使用按键修饰符的话，代码会更加简洁

语法

# 使用keyup举例
# 在下面的方法里面加上 .修饰符可以使用enter之类的标识
@keyup.enter="函数"/@keyup.alt/@keyup.esc ...
# 修饰符也可以用keyCode
@keyup.13="函数"

示例

<div id="app">
    <input type="text" v-model="mytext" @keyup.13="keyupFunc"><span>---->{{mytext}}</span>

</div>
</body>
<script>
    vm = new Vue({
        el: '#app',
        data: {
            mytext: '',
        },
        methods: {
            keyupFunc() {
                console.log('enter被按下了')
            },
        },
    })
</script>
posted @ 2023-04-07 10:24  树苗叶子  阅读(79)  评论(0)    收藏  举报