VUE3 之键盘事件

最新推荐文章于 2024-03-21 17:16:57 发布

追风人聊Java

最新推荐文章于 2024-03-21 17:16:57 发布

阅读量9.2k

点赞数 1

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

本文链接：https://blog.csdn.net/u011181989/article/details/122355003

版权

前端专栏收录该内容

33 篇文章 3 订阅

订阅专栏

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，欢迎大家关注

追风人聊Java

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
3
评论
VUE3 之键盘事件

目录1. 概述2. 键盘事件3. 综述4. 个人公众号1. 概述老话说的好：宁愿自己吃亏，也不让他人吃亏。言归正传，今天我们来聊聊 VUE3 的键盘事件。2. 键盘事件2.1 敲击任意键触发事件<body> <div id="myDiv"></div></body><script> const app = Vue.createApp({ // 创建一个vue应用实例
复制链接

扫一扫