Vue按键修饰符

ops/2024/9/25 17:14:56/

1.常用按键别名

  • .enter
  • .tab
  • .delete (捕获“Delete”和“Backspace”两个按键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

2.使用方法

javascript"><!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

其他按键同理,如果想要添加的按键不在常用按键里面,还可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符,但需要转为 kebab-case 形式。

javascript"><input @keyup.page-down="onPageDown" />

3.系统按键修饰符

  • .ctrl
  • .alt
  • .shift
  • .meta(windows为win键,mac为command键)

4.组合键

javascript"><!-- Alt + Enter -->
<input @keyup.alt.enter="clear" /><!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

5.exact修饰符

.exact 修饰符允许精确控制触发事件所需的系统修饰符的组合

javascript"><!-- 当按下 Ctrl 时,即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button><!-- 仅当按下 Ctrl 且未按任何其他键盘键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>//tips:这里应该还是要click的

6.鼠标按键修饰符

  • .left
  • .right
  • .middle

http://www.ppmy.cn/ops/48881.html

相关文章

【设计模式深度剖析】【8】【行为型】【备忘录模式】| 以后悔药为例加深理解

&#x1f448;️上一篇:观察者模式 设计模式-专栏&#x1f448;️ 文章目录 备忘录模式定义英文原话直译如何理解呢&#xff1f; 3个角色1. Memento&#xff08;备忘录&#xff09;2. Originator&#xff08;原发器&#xff09;3. Caretaker&#xff08;负责人&#xff09;类…

mysql和postgreSQL的区别

mysql 1、mysql多表连接查询方式支支持nest loop&#xff0c;不支持hash join和sort merge join。pg支持多种连接查询方式。 2、mysql子查询性能比pg低。 3、mysql的复制是异步的&#xff0c;即无法通过主从架构做到数据零丢失。一些第三方公司也有改造mysql源代码实现同步复制…

Spring-boot-logback-spring.xml文件Appender标签下的属性

在logback-spring.xml文件中&#xff0c;标签是通过set方法设置的值&#xff0c;例如下面的代码&#xff0c;属性hrName的值为TYC&#xff0c;当服务启动的时候&#xff0c;控制台会一直打印TYC三个字母 首先&#xff0c;我们自定义一个Appender&#xff0c;然后里面有一个属性…

wordpress主题开发

科普一&#xff1a;wordpress 是一套用 php 这个语言写的CMS后台管理系统&#xff0c;即我们大家的 wordpress 网站后台是一样的&#xff0c;能体现我们网站外观不同的地方就在于wordpress主题&#xff08;即皮肤&#xff09;&#xff0c;而这个主题的基本构成是 htmlcssjavasc…

小程序中的事件处理

事件处理 一个应用仅仅只有界面展示是不够的&#xff0c;还需要和用户做交互&#xff0c;例如&#xff1a;响应用户的点击、获取用户输入的值等等&#xff0c;在小程序里边&#xff0c;我们就通过编写 JS 脚本文件来处理用户的操作 1. 事件绑定和事件对象 小程序中绑定事件与…

AI数字人的开源解决方案

目前&#xff0c;国内外已经涌现出一些优秀的数字人开源解决方案&#xff0c;这些解决方案为开发者提供了构建数字人应用的工具和基础设施。以下是一些比较知名的数字人开源解决方案。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1…

Web前端网页设计模板:创新设计与高效开发的完美融合

Web前端网页设计模板&#xff1a;创新设计与高效开发的完美融合 在当今数字化时代&#xff0c;Web前端网页设计模板已经成为构建美观且功能强大的网页应用的重要工具。它不仅能够简化开发过程&#xff0c;提升工作效率&#xff0c;还能够确保网页在各种设备上都能够呈现出令人…

使用R语言生成CDISC SDTM.AE domain

写在前面 - 使用的是Rstudio - 其实R已经有生成sdtm相关的package&#xff0c;以下代码仅作为练习R语言的语法&#xff0c;不是高效生成sdtm的方法 - 代码中没有解决的问题包括&#xff1a;EPOCH相关的逻辑没有考虑partial date的情况&#xff1b;在使用arrange() function做…