在Vue中自定义键盘修饰符

最新推荐文章于 2022-02-27 23:05:22 发布
最新推荐文章于 2022-02-27 23:05:22 发布
阅读量234 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Luceyyy/article/details/110246879
版权
1.通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：
Vue.config.keyCodes.f2 = 113;

键盘上的F2对应的编码为113
此时f2已经绑定了键盘上的F2

2.使用自定义的按键修饰符：
<input type="text"  @keyup.f2="add">

当抬起F2按键时会触发add函数

Lukeyyyy
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
02-Vue按键修饰符,自定义指令
乐百寿
08-27 649
Vue键盘事件，自定义指令
Vue-自定义按键修饰符
MrLsss的博客
02-15 583
可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112自动对应按键修饰符 也可以直接使用 KeyboardEvent.key 暴露出来的所有合法按键名作为修饰...
Vue的各种keyup键盘点击事件
周瑞的博客
03-22 1484
Vue的各种keyup键盘点击事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
（六）Vue - 自定义指令和键盘修饰符
qq_33810743的博客
07-05 758
（六）Vue - 自定义指令自定义指令的介绍自定义全局指令及钩子函数钩子函数参数自定义局部指令函数的简写自定义键盘修饰符 自定义指令的介绍 前面文章中讲解了一些Vue自带指令的使用， 如果Vue自带的指令不满足于我们的需求呢？ 这篇文章我们学习如何自定义自己想要的指令来满足我们的项目需要。 关于指令,我们可以总结下面几点: 指令是写在 HTML 属性地方的.<input v-model='name' type='text' /> 指令都是以 v- 开头的. 指令表达式的右边一般也可以跟值，例如v
Vue 键盘修饰符
weixin_45677987的博客
02-27 1979
1: vue 中常用的键盘修饰符: 键盘修饰符别名: 回车 => enter键 删除 => delete键 退回 => esc 空格键 => space 换行 => tab (特殊键, 必须配合keydown 去使用) 上 => up 键 下 => dpwn 键 左 => left 键 右 => right 键 2: vue 中未提供别名的按键, 可以使用键盘原始的key 值去.
Vue键盘修饰符
qq_43246404的博客
07-14 215
使用键盘修饰的时候只有在输入的时候才起作用，一般是v-on:keyup,然后加上方法名，v-on:keyup.enter是按下enter后才触发方法事件。
vue中el-input绑定键盘按键(按键修饰符)
11-20
在Vue中，我们可以使用按键修饰符来监听特定的键盘事件。例如，监听回车键事件有两种常见的写法： ```html ($event)" /> ($event)" /> ``` 这里的`.13`和`.enter`都是用于监听回车键的修饰符，它们的效果是相同的。...
vue事件修饰符和按键修饰符用法总结
08-29
Vue.js 2.1.0 及更高版本中，添加了新的修饰符，用于开启鼠标或键盘事件监听，使在按键按下时发生响应。这些修饰符包括： * .ctrl * .alt * .shift * .meta 例如：<input @keyup.alt.67="clear"> 或 ...
vue修饰符(事件修饰符、v-model修饰符、键盘修饰符、自定义键盘修饰符)
温情
06-20 683
事件修饰符 .stop: 阻止事件冒泡，相当于调用了 event.stopPropagation()方法 <button @click.stop="test"></button> .prevent: 阻止默认行为，相当于调用了 event.preventDefault()方法，比如表单的提交、 a 标签的跳转就是默认事件 <a href="" @click.prevent="test"></a> .self: 只有点击元素本身才会触发。比如一个
vue键盘修饰符
weixin_30398227的博客
08-19 133
keyup事件 <input type='input' @keyup="keyEvent"> keyup.enter事件 <input type='input' @keyup.enter="keyEvent"> keyup.ctrl+a事件 <input type='input' @keyup.ctrl.65="keyEvent"&...
vue的键盘修饰符
博客的博客
10-23 202
vue的键盘修饰符就是在按下按键或者弹起按键的时候执行某个操作 <body> <div id="app"> <h4>{{ msg}}</h4> <input type="text" name="" id="" @keyup.enter="add" v-model="msg2"> </...
Vue 中的键盘修饰符
qq_45701634的博客
06-10 182
// 在网页中，有时候会有这种需求，按下键盘上的某个键，就响应一个事件 <label for="">Name: <input type="text" name="name" class="form-control" v-model="Name" @keyup.enter="add()"/> </label> //Vue为键盘的常用按键设置了别名，在keyup事件中，不需要记住这个键keycode,直接使用别名就好了 .enter,
Vue中自定义按键修饰符
weixin_45616246的博客
04-07 146
我于杀戮之中绽放,亦如黎明中的花朵 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>按键修饰符</title> <script src="../../vue/vue.js"></script&g...
Vue自定义按键修饰符
qq_42430908的博客
12-09 426
文章目录1. vue提供的按键码2. 其他按键码3. 自定义全局按键修饰符 1. vue提供的按键码 .enter .tab .delete .esc .space .up .down .left .right 示例代码： <input type="text" class="form-control" v-model="name" @keyup.enter="add()"> 2. 其他按键码 keyCode 8 = BackSpace BackSpace keyCode 9 = Tab T
Vue学习记录— 键盘修饰符以及自定义键盘修饰符
小灰狼与大白兔的博客
02-20 6216
键盘修饰符以及自定义键盘修饰符 按键修饰符也就是Vue提供的键盘监听事件。 &lt;label&gt;Name: &lt;!--输入完成之后按下 enter键即可调用add 方法--&gt; &lt;input type="text" v-model="name" class="form-control" @keyup.enter="add"&gt;
【vue笔记】6.键盘修饰符
AXIMI的博客
03-04 201
现在对如下的用户管理系统进行修改，使得在添加用户时，输入回车键可以直接添加用户，而不是要点击add按钮才可以添加。要实现这个功能可以使用键盘修饰符。 对Name输入框的代码可以修改为： &amp;lt;label&amp;gt; Name:&amp;lt;input type=&quot;text&quot; v-model=&quot;name&quot; @keyup.enter=&quot;add&quo
vue 按键修饰符(对于键盘的操作)
yc_1314的博客
10-03 128
@keyup事件 通过@keyup监听键盘事件的产生。 实例 <body> <div id="app"> <input type="text" @keyup.esc="clear"> </div> <script> new Vue({ el: "#app", data: { }, methods:
Vue自定义按键修饰符：第二天
Fanbin168的专栏
01-02 737
在很多时候，我们想要在键盘上按一个指定的键，实现，新增，删除的目的，比如按一下回车键，就要实现新增数据的目的 这样我们就需要监听键盘事件。比如 keydown：按键按下，keyup：按键抬起，keypress：按键按下抬起 在Vue中允许为 v-on 在监听键盘事件时添加按键修饰符： 例如：keycode键盘码对照表 &lt;!-- 只有在 `keyCode` 是 13 时调用 `vm实...
Vue.js 键盘修饰符以及自定义键盘修饰符
C.
02-20 668
键盘修饰符以及自定义键盘修饰符 1.x中自定义键盘修饰符【了解即可】 Vue.directive('on').keyCodes.f2 = 113; 2.x中自定义键盘修饰符 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名： Vue.config.keyCodes.f2 = 113; 使用自定义的按键修饰符： &lt;input type=...
vue修饰符阻止捕获
最新发布
09-26
Vue修饰符中的.prevent修饰符可以用来阻止默认事件的触发。当在Vue模板中使用.prevent修饰符时，它会告诉Vue在执行相关事件处理程序之前，先调用event.preventDefault()方法来阻止默认事件的发生。 默认事件是指...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值