VUE3 之 键盘事件

1. 概述

老话说的好：宁愿自己吃亏，也不让他人吃亏。

 

言归正传，今天我们来聊聊 VUE3 的 键盘事件。

 

2. 键盘事件

2.1 敲击任意键触发事件

复制代码
<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({     // 创建一个vue应用实例
        
        methods : {
            myKeydown() {
                console.info("myKeydown");
            },
        },

        template : `
            <div>
              <input @keydown="myKeydown" />
            </div>  
        `
    });

    const vm = app.mount('#myDiv');  // 绑定id为 myDiv 的元素
复制代码

 

2.2 仅敲击回车触发事件

        template : `
            <div>
              <input @keydown.enter="myKeydown" />
            </div>  
        `

 

2.3 Tab键触发事件

        template : `
            <div>
              <input @keydown.tab="myKeydown" />
            </div>  
        `

 

2.4 退格（Backspace）或 Delete 键触发

        template : `
            <div>
              <input @keydown.delete="myKeydown" />
            </div>  
        `

 

2.5 上下左右键触发

        template : `
            <div>
              <input @keydown.up="myKeydown" />
            </div>  
        `

 

        template : `
            <div>
              <input @keydown.down="myKeydown" />
            </div>  
        `

 

        template : `
            <div>
              <input @keydown.left="myKeydown" />
            </div>  
        `

 

        template : `
            <div>
              <input @keydown.right="myKeydown" />
            </div>  
        ` 

 

3. 综述

今天聊了一下 VUE3 的 键盘事件，希望可以对大家的工作有所帮助

欢迎帮忙点赞、评论、转发、加关注 ：）

关注追风人聊Java，每天更新Java干货。

 

4. 个人公众号

追风人聊Java，欢迎大家关注

 

posted @   追风人聊Java  阅读(2531)  评论(0)  编辑  收藏  举报
相关博文：
· VUE3 之 click 事件
· VUE3 之 动态组件 - 这个系列的教程通俗易懂，适合新手
· vue(vue.js)中的键盘事件
· Vue.js 事件处理-键盘事件
· 事件处理_3键盘事件
阅读排行：
· Blazor Hybrid适配到HarmonyOS系统
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· 解决跨域问题的这6种方案，真香！
· 分享4款.NET开源、免费、实用的商城系统
· 一套基于 Material Design 规范实现的 Blazor 和 Razor 通用组件库
点击右上角即可分享
微信分享提示