vue中的按键修饰符

名字是乱打的

发布于 2021-12-22 15:35:43

1.3K0

发布于 2021-12-22 15:35:43

文章被收录于专栏：软件工程

在监听键盘事件时，我们经常需要查找常用按键对应的 code 值。Vue 可以在 v-on 上添加按键修饰符，用于监听按键事件

主要原因是因为如果我们每次都要通过监听键入的key code比较麻烦,所以vue设置了许多别名绑定到v-on:上我们可以直接.使用.

这里列出所有的按键修饰符别名：

.enter => // enter键
.tab => // tab键
.delete (捕获“删除”和“退格”按键) => // 删除键
.esc => // 取消键
.space => // 空格键
.up => // 上
.down => // 下
.left => // 左
.right => // 右

系统辅助按键 仅在以下修饰符对应的按键被按下时，才会触发鼠标或键盘事件监听器

.ctrl
.alt
.shift
.meta

案件修饰符demo,可自行赋值到ide里调试测试

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>v-on:按键修饰符</title>

        <script src="js/vuejs-2.5.16.js"></script>
    </head>

    <body>
        <div id="app">
            <textarea v-on:keyup.enter="fun1()"></textarea>
        </div>
    </body>
    <script>
        //view model
        new Vue({
            el:"#app",
            methods:{
                fun1:function(){
                    alert("您按下了回车");
                }
            }
        })
    </script>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/11/16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法