Vue键盘事件

news2025/1/12 23:28:08

1.Vue中常用的按键别名:

        回车=====enter

        删除=====delete(捕获“删除”和“退格”键)

        推出=====esc

        空格=====space

        换行=====tab(特殊,必须配合keydown使用)

        上=======up

        下=======down

        左=======left

        右=======right

2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)

3.系统修饰键(用法特殊):ctrl、alt、shift、meta

        (1)配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。

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

4.也可以使用keyCode去指定具体的按键(不推荐)

5.Vue.config.keyCode.自定义键名 = 键码,可以去定制按键别名

效果:按回车时候才触发@keyup.enter

<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            name:'山河大学',
        },
        methods:{
            showInfo(e) {
                console.log(e.target.value)  //获取目标的value
            }
        }
    })
</script>

 打印按键名称和编码

<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            name:'山河大学',
        },
        methods:{
            showInfo(e) {
                console.log(e.key,e.keyCode)
               
            }
        }
    })
</script>

 自定义键盘绑定事件CapsLock写的时候是俩单词要分开写,并且中间要用横杠连接

 定义按键:

Vue.config.keyCodes.huiche = 13  //定义了一个别名按键

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/703728.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Arduino驱动BH1750模块实现光照强度采集

Arduino驱动BH1750模块实现光照强度采集 简介特征电气参数接线程序结果 简介 BH1750FVI是一个用于I2 C总线接口的数字环境光传感器IC。该IC最适合于获取调节手机液晶显示屏和键盘背光功率的环境光数据。在高分辨率下探测大范围是可能的。(1 - 65535 lx )。BH1750FVI可以应用于…

Matlab 回归分析与预测

统计分析 回归分析与预测 数理统计—回归分析 回归分析类型 回归分析目的 一元线性回归 多元线性回归的案例 %{ [B,BINT,R,RINT,STATS] regress(Y,X) [B,BINT,R,RINT,STATS] regress(Y,X,ALPHA) 参数解释&#xff1a;B&#xff1a; 回归系数&#xff0c;是个向量&…

小程序官方tabbar和自定义tabbar

uniapp官方tabbar&#xff1a; 打开项目中的 pages.json 文件。 在 JSON 对象中添加一个名为 tabBar 的字段&#xff0c;并设置其值为一个对象。 在 tabBar 对象中&#xff0c;配置 color 和 selectedColor 字段来定义 TabBar 的默认颜色和选中项的颜色。示例&#xff1a; …

功放IC 2018和功放IC HX8358A的区别

概述&#xff1a; 2018功放IC&#xff0c;目前在市面的情况是品牌多、杂&#xff0c;芯片的工作电压和喇叭输出功率不统一。经常出现低电压芯片用在高电压的产品上面&#xff0c;导致芯片容易损坏&#xff0c;给用户带来一定的麻烦。但它的销售量可能已超过8002的功放芯片了&am…

6.19、JAVA IO流 File 字节流 字符流

IO简介 1 流Stream 在学习IO流之前,我们首先需要学习的概念就是Stream流 为了方便理解,我们可以把数据的读写操作抽象成数据在"管道"中流动,但需注意: 1.流只能单方向流动 2.输入流用来读取 → in 3.输出流用来写出 → out 4.数据只能从头到尾顺序的读写一次 所以以…

Python 基本数据类型(六)

文章目录 每日一句正能量Tuple&#xff08;元组&#xff09;结语 每日一句正能量 一生要做的几件事情一管理好自己的身体。二管理好自己的情绪&#xff0c;正面思维。三服务好自己的家庭&#xff0c;让家人生活幸福。四做好本职工作&#xff0c;做一两件特别完美&#xff0c;石…

剑指 Offer 51: 数组中的逆序对

这道题归根结底就是一个归并问题&#xff0c;逆序对本质上就是比较大小&#xff0c;如果两边作为一个整体比较过那么就可以排序合并&#xff08;因为这个过程每一步都计算了count的值&#xff0c;所以合并起来是可以的&#xff09;。 下面的k应该是mid1&#xff08;从中间的右…

智“绘“城市:智慧环卫可视化运营管理系统

前言 随着我国城镇化的不断推进&#xff0c;城市的规模、数量不断增加&#xff0c;城市的人口数量也快速增长&#xff0c;造成的城镇生活垃圾、建筑垃圾也随之增长&#xff0c;这造成人们对环卫服务的需求增加。而与此同时&#xff0c;随着经济社会的快速发展&#xff0c;人们…

ChatGLM-6B微调p tuning v2和lora对比

官方项目地址&#xff1a;https://github.com/THUDM/ChatGLM-6B 参考本人之前的博客下载ChatGLM-6B模型&#xff1a; https://blog.csdn.net/Acecai01/article/details/131221676 设备 一张3090Ti&#xff0c; 24G显卡 实验目的 通过微调的方法&#xff0c;训练ChatGLM-6B模…

【AUTOSAR】BMS开发实际项目讲解(二十七)----电池管理系统高压上下电管理

高压上下电管理 关联的系统需求 Sys_Req_3201、Sys_Req_3202、Sys_Req_3203、Sys_Req_3204、Sys_Req_3205、Sys_Req_3206、Sys_Req_3207、Sys_Req_3208、Sys_Req_3209; 功能实现描述 高压上下电管理基于下图所示高压拓扑开发 图继电器高压拓扑图 高压上电管理 高压上电管理需…

华为bgp跨跳建立邻居后产生黑洞路由用mpls ldp解决方法

捉包发现R2在处理1.1.1.1到5.5.5.5走的是标签转发 R1: dis current-configuration [V200R003C00] snmp-agent local-engineid 800007DB03000000000000 snmp-agent clock timezone China-Standard-Time minus 08:00:00 portal local-server load flash:/portalpage.zip drop i…

Jenkins2.3.46安装

一、安装和安装Jenkins 0.前提 因jenkins从2.357版本开始不再支持java8 2、jenkins与java版本对应查看&#xff0c;与jenkins下载&#xff1a;Redhat Jenkins Packages 3、打算使用java8&#xff0c;所以选择安装2.346.3-1.1 4、安装jenkins之前&#xff0c;安装好java8并…

Day_58-59 NB 算法

目录 Day_58符号型数据的 NB 算法 一. 关于NB算法的介绍 1. 条件概率 2. 独立性假设 3. 以上式子的分析 4. Laplacian 平滑 5. 问题的回顾 二. 代码实现 1. 代码的符号说明 2. 构造函数和基础函数 3. 计算结果的分布情况 4. 核心代码 5. 分类 三. 符号型数据的运行结果 Da…

使用vtk创建设置了面的颜色的立方体

引言 该示例为官网上的例子。创建了一个每个面被设置相同颜色的立方体。 示例 开发环境 使用QtCreator4.11.2,Qt5.14.2。使用的vtk9.2的库及其头文件。创建空项目。 示例代码 其pro文件中的内容&#xff1a; QT core guigreaterThan(QT_MAJOR_VERSION, 4): QT w…

利用jmeter测试java请求

jmeter和loadrunner一样包含了测试脚本开发、测试执行、以及测试结果统计三个部分。只是jmeter没有脚本开发工具&#xff0c;因此测试java请求的脚本选择在eclipse中进行。 首先介绍如何用eclipse编写接口性能测试脚本。 针对"Java请求"类型的测试&#xff0c;需要…

折半查找包含程序

折半查找又称二分查找&#xff0c;它仅适用于有序的顺序表 以下面的例子来讲解折半查找的过程 元素710131619293233374143数组位置012345678910 第一步&#xff1a;先确定查找元素&#xff0c;以14为例子&#xff1b;low和high分别是指向表的上界和下界&#xff1b;最开是low…

【Cookie】Cookie简介以及跨域问题

Cookie 一、Cookie简介 1、Cookie是什么 cookie是由网络服务器存储在你电脑硬盘上的一个txt类型的小文件&#xff0c;它和你的网络浏览行为有关&#xff0c;所以存储在你电脑上的cookie就好像你的一张身份证&#xff0c;你电脑上的cookie和其他电脑上的cookie是不一样的。 …

java 堆(优先级队列)详解

JAVA堆以及优先级队列详解 一、堆的模拟实现1.1堆的概念1.2 堆的性质1.3堆的存储结构1.4堆的创建1.4.1 只有根节点不满足堆的特性1.4.2 不只有根节点不满足堆的特性1.4.2.1 建堆代码1.4.2.2 建堆过程图示 1.4.3 建堆的时间复杂度 1.5堆的插入1.5.1堆的插入的基本思想1.5.2堆的插…

非局部attention之Non-local

论文&#xff1a;Non-local Neural Networks Github&#xff1a;GitHub - AlexHex7/Non-local_pytorch: Implementation of Non-local Block. GitHub - facebookresearch/video-nonlocal-net: Non-local Neural Networks for Video Classification cvpr2018 凯明作品 论文提出…

Echarts自定义legend图例

legend: {icon: rect, // 形状itemHeight: 4, // 高度itemWidth: 18, // 宽度itemGap: 15, //设置图例的间距...... }, 效果&#xff1a;