当前位置： 首页 > news >正文

vue-按键修饰符

news 2025/12/15 12:25:07

按键修饰符：主要用于监听键盘上的按钮被按下时，可触发对应的事件函数

            v-on:keyup.修饰符.修饰符】、

            .enter

            .tab

            .delete(针对delete和backspace两个按键)

            .esc

            .space

            .esc

            .space

            .up

            .down

            .left

            .right

            系统修饰符必须按下才触发

            .ctrl

            .alt

            .shift

            .meta:mac针对的是command键盘，windows针对的windows键盘（田）

例子代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-on事件处理指令</title>
</head>
<body><!--v-on 给元素（标签）绑定事件监听器oninput、onclick、onchange、onblur等完整方式`v-on:事件名=“函数/方法”`简写方式`@事件名=“函数/方法”，注意@符号不能加冒号“：”`@input /@click/@change/@blur .....--><div id="app"><!--事件处理方式say未传递参数，则默认会传递DOM原生事件对象--><button v-on:click="say">v-on绑定的时间按钮：{{msg}}</button><!--事件的处理方法say传递了参数，则默认不会传递DOM原生事件对象--><button @click="say(123)">简写@绑定的事件按钮：{{msg}}</button><!--事件的处理方法传递了多个参数，如果需要获取远程DOM事件对象，则必须手动传$event--><button @click="doLog('牛逼',$event)">手动传递DOM事件对象</button><input @blur="doBlur"><!--事件修饰符：.stop 阻止单机事件继续传播 event.stopProgagetion()<div @click="todo"><div @click="doThis"></div></div>.prevent 阻止事件默认行为<a href="**" @click.prevent="**"></a>.once 事件只会触发一次<button @click.once="add">新增+1</button>--><h3>事件修饰符</h3><div @click="todo"><div @click.stop="doThis">单机事件会继续传递</div></div><br><!--默认情况下：会触发点击事件，且会进行页面跳转--><a href="http://www.baidu.com" @click="doStop">默认跳转</a><br><!--.prevent 阻止事件默认行为--><a href="http://www.baidu.com" @click.prevent="doStop">.prevent修饰符-跳转</a><br><button @click="doOnly1">点击事件每次加一{{num1}}</button><br><button @click.once="doOnly">.once修饰符，点击事件只触发一次{{num}}</button><!--按键修饰符：主要用于监听键盘上的按钮被按下时，可触发对应的事件函数v-on:keyup.修饰符.修饰符】、.enter.tab.delete(针对delete和backspace两个按键).esc.space.esc.space.up.down.left.right系统修饰符必须按下才触发.ctrl.alt.shift.meta:mac针对的是command键盘，windows针对的windows键盘（田）    --><h3>按键修饰符</h3><input v-on:keyup.enter="keyEnter" placeholder="监听回车（enter）事件"><input v-on:keyup.delete="keyDelete" placeholder="监听删除（针对delete和backspace两个按键）"><!--Alt + center--><input @keyup.alt.enter="altEnter" placeholder="监听Alt + center"><div @click.ctrl="clickCtrl">Ctrl+点击事件</div><input @keyup.meta.delete="mdt" placeholder="监听田 + delete或backspace两个按键"><input @keyup.ctrl.shift.x="ctrlShiftx" placeholder="ctrlShiftx"></div><script src="./node_modules/vue/dist/vue.global.js"></script><script type="text/javascript">const {createApp} = Vue;const app=createApp({data(){return{msg:"aaa",num:0,num1:0}},//定义方法的选项methods: {say(event){//event 事件对象this.msg="5555"; //this 代表app对象console.log("say something!",event);},//多个必须加逗号doLog(name,event){console.log(name,event);},doBlur(event){console.log('输入框失去焦点',event.target.value); //获取输入框值},doThis(event){console.log("doThis");},todo(event){console.log("todo");},doStop(){alert("doStop!");},doOnly1(){this.num1++;console.log("doOnly1");},doOnly(){this.num++;console.log("doOnly");},keyEnter(){console.log("监听enter按键");},keyDelete(event){console.log("监听delete和backspace两个按键按键",event.keyCode);},altEnter(event){console.log("监听alt和Enter两个组合按键",event.keyCode);},clickCtrl(){console.log("监听clickCtrl",event.keyCode);},mdt(){console.log("监听田 + delete或backspace两个按键",event.keyCode);},ctrlShiftx(){console.log("ctrlShiftx",event.keyCode);}}}).mount("#app");console.log("app",app);</script></body>
</html>

相关文章：

vue-按键修饰符

按键修饰符&#xff1a;主要用于监听键盘上的按钮被按下时&#xff0c;可触发对应的事件函数 v-on:keyup.修饰符.修饰符】、 .enter .tab .delete(针对delete和backspace两个按键) .esc .space .esc .space .up .down .left .right 系统修饰符必须按下才触发 .ctrl .alt .shift…...

编程日记 2023/10/16 16:48:57

[初始java]——java为什么这么火，java如何实现跨平台、什么是JDK/JRE/JVM

java的名言&#xff1a; ”一次编译、到处运行“ 一、编译语言与解释语言 编译&#xff1a; 是将整份源代码转换成机器码再进行下面的操作&#xff0c;最终形成可执行文件 解释&#xff1a; 是将源代码逐行转换成机器码并直接执行的过程&#xff0c;不需要生成目标文件 jav…...

编程日记 2023/10/16 16:47:55

R语言手动绘制NHANSE数据基线表并聊聊NHANSE数据制作亚组交互效应表的问题（P for interaction）

美国国家健康与营养调查&#xff08; NHANES, National Health and Nutrition Examination Survey&#xff09;是一项基于人群的横断面调查&#xff0c;旨在收集有关美国家庭人口健康和营养的信息。 地址为&#xff1a;https://wwwn.cdc.gov/nchs/nhanes/Default.aspx 在既往的…...

编程日记 2023/10/16 16:46:54

C++引用(起别名)

0.引用的概念 引用不是新定义一个变量&#xff0c;而是给已存在变量取了一个别名&#xff0c;从语法的角度来说编译器不会为引用变量开辟内存空间&#xff0c;它和它引用的变量共用同一块内存空间。比如说你的名字和外号指的都是你本人。 void Test() {int a 10;int& ra …...

编程日记 2023/10/16 16:45:53

Ubuntu：VS Code IDE安装ESP-IDF【保姆级】（草稿）

物联网开发学习笔记——目录索引 Visual Studio Code&#xff08;简称“VS Code”&#xff09;是Microsoft向开发者们提供的一款真正的跨平台编辑器。 参考&#xff1a; VS Code官网&#xff1a;Visual Studio Code - Code Editing. Redefined 乐鑫官网&#xff1a;ESP-IDF …...

编程日记 2023/10/16 16:44:52

子序列（All in All, UVa 10340）rust解法

输入两个字符串s和t&#xff0c;判断是否可以从t中删除0个或多个字符&#xff08;其他字符顺序不变&#xff09;&#xff0c;得到字符串s。例如&#xff0c;abcde可以得到bce&#xff0c;但无法得到dc。 解法 use std::io;fn main(){let mut buf String::new();io::stdin().…...

编程日记 2023/10/16 16:43:51

AI时代，当项目经理遇到ChatGPT，插上腾飞的翅膀！

文章目录 一、 ChatGPT 在项目管理中的应用1. 任务分配和跟踪2. 风险管理3. 沟通和协作 二、 ChatGPT 在项目管理中的优势1. 高效性2. 可靠性3. 灵活性 三、 ChatGPT 在项目管理中的应用场景1. 智能会议2. 智能文档3. 智能报告 结语AI时代项目经理成长之道&#xff1a;ChatGPT让…...

编程日记 2023/10/16 16:42:50

Springboot项目中加载Groovy脚本并调用其内部方代码实现

前言 项目中部署到多个煤矿的上&#xff0c;每一种煤矿的情况都相同&#xff0c;涉及到支架的算法得写好几套&#xff0c;于是想到用脚本实现差异变化多的算法&#xff01;一开始想到用java调用js脚本去实现&#xff0c;因为这个不需要引入格外的包&#xff0c;js对我来说也没…...

编程日记 2023/10/16 16:39:47

为什么要做数据可视化

在当今信息爆炸的时代&#xff0c;数据已成为个人和企业最宝贵的资产之一。然而&#xff0c;仅仅拥有大量的数据并不足以支持明智的决策。数据可视化&#xff0c;作为一种将数据转化为图形形式的技术和方法&#xff0c;可以帮助我们更好地理解和分析数据&#xff0c;从而更准确…...

编程日记 2023/10/16 16:38:46

0基础学习VR全景平台篇 第108篇：全景图细节处理（下，航拍）

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; &#xff08;调色前图库&#xff09; &#xff08;原图-大图&#xff09; 一、导入文件 单击右下角导入按钮&#xff0c;选择航拍图片所在文件夹&#xff0c;选择图片&#xff0…...

编程日记 2023/10/16 16:37:45

linux查看文件内容命令more/less/cat/head/tail/grep

1.浏览全部内容more/less 文件&#xff1a; more&#xff1a;可以查看文件第一屏的内容&#xff0c;同时左下角有一个显示内容占全部文件内容的百分比&#xff0c;空格键会显示下一屏的内容&#xff0c;直到文件末尾 [rootmaster data]# more file1less&#xff1a;相较于mor…...

编程日记 2023/10/16 16:36:44

VBA窗体跟随活动单元格【简易版】

本篇博客与以往的风格不同&#xff0c;先上图再讲解。 这个效果是不是很酷&#xff0c;VBA窗体&#xff08;即UserForm&#xff0c;下文中简称为窗体&#xff09;可以实现很多功能&#xff0c;例如&#xff1a;用户输入数据&#xff0c;提供选项等等。如本博客标题标注&#…...

编程日记 2023/10/16 16:35:42

epiiAdmin框架注意事项

1&#xff0c;epiiAdmin文档地址&#xff1a; 简介/安装 EpiiAdmin中文文档 看云 2&#xff0c;项目性想新建模块 composer.json文件——autoload选项——psr-4下增加模块名称&#xff0c;然后执行composer update命令。 "autoload": {"psr-4": {"…...

编程日记 2023/10/16 16:34:41

数据仓库与ETL

什么是数据仓库 一种用于存储和管理数据的系统&#xff0c;提供一种统一方式&#xff0c;将不同来源、不同方式、不同时间的数据集成在一起。 数据仓库结构 主题域&#xff1a;一个特定领域的数据集&#xff0c;比如营销、销售、客户、库存等。 维度&#xff1a;定义数据的不…...

编程日记 2023/10/16 16:31:38

Centos7安装Gitlab--gitlab--ee版

1 安装必要依赖 2 配置GitLab软件源镜像 3 下载安装GitLab 4 查看管理员root用户默认密码 5 登录GitLab 6 修改密码 7 gitlab相关命令 1 安装必要依赖 sudo yum install -y curl policycoreutils-python openssh-server perl sudo systemctl enable sshd sudo systemctl sta…...

编程日记 2023/10/16 16:30:38

主题教育问题清单及整改措施2023年-主题教育对照六个方面个人剖析材料

无论前方路途多么坎坷&#xff0c;都要保持内心的坚定和勇敢。生活中没有什么不可战胜的困难&#xff0c;只有我们是否愿意去面对和克服。要相信自己的能力&#xff0c;相信自己拥有足够的智慧和力量去应对一切挑战 每一次的努力都不会白费&#xff0c;每一次的奋斗都是在为自己…...

编程日记 2023/10/16 16:29:37

php新手实战：自定义书源下载api

网上有很多第三方小说网站提供小说下载&#xff0c;而下载的过程无非就是搜索书籍&#xff0c;然后找到下载链接点击下载即可。只是类似这种“良心”的小说网站实在是太少。大多数仅支持在线阅读。而如今&#xff0c;我却要利用这种为数不多的“良心”小说站点提供的书源来作为…...

编程日记 2023/10/16 16:28:36

数据结构 - 5（二叉树7000字详解）

一&#xff1a;二叉树的基本概念 1.1树形结构 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 注意&am…...

编程日记 2023/10/16 16:27:35

xshell使用方法（超详细）

一、安装 下载最新版安装即可&#xff0c;不需要做任何配置。 安装完成后输入账号名和邮箱&#xff0c;确认后邮箱会收到一条确认邮件&#xff0c;将里面的链接点开即可免费使用&#xff08;仅安装后会出现&#xff0c;认证后以后再打开不需要重复操作&#xff0c;如果重新安…...

编程日记 2023/10/16 16:25:32

【数据库系统概论】第三章关系数据库标准语言SQL

选择题会考&#xff1a; 1.数据查询&#xff1a; SELECT&#xff1a;用于选择需要查询的列和行。 FROM&#xff1a;用于指定要查询的表。 WHERE&#xff1a;用于指定查询条件。 GROUP BY&#xff1a;用于按照指定的列对结果进行分组。 HAVING&#xff1a;用于指定分组条件…...

编程日记 2023/10/16 16:24:31

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2025/12/9 14:34:25

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/12/13 16:45:53

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2025/12/9 10:21:27

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2025/12/14 2:31:21

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2025/11/30 2:41:30

HTML前端开发：JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

编程新知 2025/10/6 18:44:24

【实施指南】Android客户端HTTPS双向认证实施指南

&#x1f510; 一、所需准备材料 证书文件&#xff08;6类核心文件&#xff09; 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...

编程新知 2025/9/15 14:56:23

【Zephyr 系列 16】构建 BLE + LoRa 协同通信系统：网关转发与混合调度实战

🧠关键词：Zephyr、BLE、LoRa、混合通信、事件驱动、网关中继、低功耗调度 📌面向读者：希望将 BLE 和 LoRa 结合应用于资产追踪、环境监测、远程数据采集等场景的开发者 📊篇幅预计：5300+ 字 🧭 背景与需求 在许多 IoT 项目中，单一通信方式往往难以兼顾近场数据采集…...

编程新知 2025/12/6 1:13:08

python打卡day47

昨天代码中注意力热图的部分顺移至今天 知识点回顾&#xff1a; 热力图 作业&#xff1a;对比不同卷积层热图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import D…...

编程新知 2025/9/18 6:40:28