vue键盘事件：@keyup.down下方向键绑定事件

逃离我推掉我的手 2023-10-02 17:25 10阅读 0赞

> @keyup.13 回车
> 
> @keyup.enter 回车
> 
> @keyup.left 左键
> 
> @keyup.right 右键
> 
> @keyup.up 上键
> 
> @keyup.down 下键
> 
> @keyup.delete 删除键

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            
        </style>
    </head>
    <body>
        <div id="app">
            <p >{
       {a}}</p>
            
            <input type="text" @keyup.down='add'>
        </div>
        <script src="js/vue.js"></script>
        <script>
            var vue = new Vue({
          
                el:"#app",
                data:{
          
                    a: 100
                },
                methods:{
          
                    add(event) {
          
                        console.log(event)
                        this.a ++
                        console.log(this.a)
                    }
                }
            })
        </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b46d69c3e2b44c46a90dd9e3318df12e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w,size_20,color_FFFFFF,t_70,g_se,x_16

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 3.Vue—绑定事件、事件修饰符、键盘事件（详细）

目录一、绑定事件 1.1 简单事件回调 1.2 传入参数 1.2.1 调用时无参 1.2.2 调用时传参 1.2.3 细节问题二、事件修饰符 2.1 pre

柔光的暖阳◎/ 2024年04月08日 13:14/ 0 赞/ 90 阅读

相关 vue键盘事件：@keyup.down下方向键绑定事件

> @keyup.13 回车 > > @keyup.enter 回车 > > @keyup.left 左键 > > @keyup.right 右键 > > @keyup

逃离我推掉我的手/ 2023年10月02日 17:25/ 0 赞/ 11 阅读

相关 vue事件绑定

@dblclick.native 绑定原生事件，可改成@dblclick.native="handle" 然后在methods中写handle方法 <templat

朴灿烈づ我的快乐病毒、/ 2023年07月13日 15:15/ 0 赞/ 23 阅读

相关 vue 特定条件下绑定事件

今天写了个小功能，看起来挺简单，写的过程中发现了些坑。 1.div没有disabled的属性，所以得写成button 2.disabled在data时，

ゝ一纸荒年。/ 2023年06月10日 10:28/ 0 赞/ 9 阅读

相关 Vue 事件绑定

v-on指令用法： <button type="button" v-on:click ="num++">点击</button> v-on 可用@代替 @click

谁借莪１个温暖的怀抱￠/ 2023年03月12日 09:07/ 0 赞/ 37 阅读

相关详解在vue项目当中绑定键盘事件

在vue项目当中，有时会遇到为文本输入框或者button按钮绑定键盘事件，最常见的就是enter回车事件。按照vue官网给出的方法是： v-on:keyup.enter

朱雀/ 2022年10月22日 10:45/ 0 赞/ 397 阅读

相关 vue(2)事件绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

我会带着你远行/ 2022年10月02日 11:44/ 0 赞/ 253 阅读

相关 vue的键盘事件直接绑定无效？

![Center][] 想给搜索框加上回车事件，方便操作，但是发现，直接写在绑定事件上必须先点击一次，获取了焦点之后再次按回车键才能触发见键盘事件。错误代码： <

妖狐艹你老母/ 2022年06月07日 05:44/ 0 赞/ 325 阅读

相关 vue 事件绑定

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />

末蓝、/ 2022年05月31日 09:57/ 0 赞/ 328 阅读

相关 Vue之绑定事件

绑定事件 v-on:click 简写：@click；为button添加一个change的点击事件，改变content的值 <div> <div cla

喜欢ヅ旅行/ 2022年04月22日 10:24/ 0 赞/ 337 阅读