Vue2键盘事件

一枕槐安1

已于 2023-05-01 14:36:46 修改

阅读量790

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

于 2022-07-13 11:42:56 首次发布

本文链接：https://blog.csdn.net/weixin_64770583/article/details/125760028

版权

前端专栏收录该内容

24 篇文章 3 订阅

订阅专栏

1.Vue中常用的按键别名

回车：enter

删除：delete

退出：esc

空格：space

换行：tab

上：up

下：down

左：left

右：right

2.Vue未提供的别名的按键，可以使用按键原始的key值去绑定

3.系统修饰词(用特殊法) ：ctrl alt shift meta

(1) 配合keyup使用：按下修饰键的同时，再按下其它键，随后释放其他键，时间才被触发

(2) 配合keydown使用：正常触发事件

4.也可以使用keyCode去指定具体的按键(不推荐，已经快被淘汰了)

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制案件别名（不推荐）

绑定键盘事件例子

1. 有提供别名的键，在输入框按下回车键时,执行tip(){}函数

<body>
    <div class="box">
        <h3>学Vue去{{name}},地址在{{address}}</h3>
        <input type="text" placeholder="按回车键提示" @keyup.enter="tip()">
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el: '.box',
        data: {
            name: '尚硅谷',
            address: '北京',
        },
        methods: {
            tip() {
                alert('教的就是好!!!');
            }
        }
    });
</script>

2.没有提供别名的，可以直接用按键的keyCode值，比如Backspace退格键的keyCode值为8

        <input type="text" placeholder="按回车键提示" @keyup.8="tip()">

keyup与keydown的区别

1.keyup 键按下再松开触发

2.keydown 键按下就触发

一枕槐安1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2键盘事件

键盘绑定事件
复制链接

扫一扫

专栏目录

Vue2键盘事件

1.Vue中常用的按键别名

keyup与keydown的区别

“相关推荐”对你有帮助么？