Vue-自定义按键修饰符

最新推荐文章于 2021-04-13 11:55:56 发布
最新推荐文章于 2021-04-13 11:55:56 发布
阅读量100 收藏
点赞数
分类专栏： 从零开始学习VUE 文章标签： vue vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44822110/article/details/105054764
版权

自定义按键修饰符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        //<!-- @keyup.65 按键的keyCode  a是65-->
        //<!-- <input type="text" @keyup.65="handle" v-model="info"> -->
        <input type="text" @keyup.aaa="handle" v-model="info">
    </div>
    <script src="js/vue.js"></script>
    <script>
        // 自定义修饰符
        // 规则  名字是自定义的，但是值必须是按键对应event.code值
        Vue.config.keyCodes.aaa = 65
        var vm = new Vue({
            el: '#app',
            data: {
                info: ''
            },
            methods: {
                handle: function (event) {
                    // 获取按键的keyCode
                    console.log(event.keyCode);

                }
            }
        })
    </script>
</body>

</html>
吃瓜的阳大王
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 按键修饰符处理事件的方法
08-27
主要介绍了Vue 按键修饰符的相关资料，vue中新增按键修饰符和系统修饰符来处理类似的事件，具体内容详情大家参考下本
10.v-on:keyup自定义按键修饰符
code_dream_wq的博客
11-26 236
自定义按键修饰符别名 - 在Vue中可以通过`config.keyCodes`自定义按键修饰符别名 <div id="app"> 预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法 <input type="text" v-on:keydown.f5="prompt()"> </div> <script> Vue.config.keyCodes.f5 = 116;
Vue 中的按键别名（.enter）和修饰键（.ctrl）
weixin_43343144的博客
01-08 1106
参考文章：https://blog.csdn.net/latency_cheng/article/details/78141732   1、按键别名 在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符： //直接后面带.ascii码 &lt;input v-on:keyup.65="func(event)"&gt;   //直接后面...
vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native
Kuroko's Development Notes
05-18 13万+
vue运行为v-on在监听键盘事件时，添加了特殊的键盘修饰符： &lt;input v-on:keyup.13="submit"&gt; vue还非常贴心地给出了常用按键的别名，这样就不必去记keyCode ~ ~ 上面代码，还可以在这样写：   &lt;input v-on:keyup.enter="submit"&gt; &lt;input @keyup.enter="submit...
Vue 自定义按键修饰符与自定义按键修饰符别名
weixin_43736435的博客
05-26 575
在监听键盘事件时，我们经常需要检查详细的按键。实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： <!-- 只有在 `key` 是 `Enter` 时调用 `vm.add()` --> <input v-on:keyup.enter="add()"> Vue提供了常用的按键码的别名： .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .righ
Vue中监听键盘事件
热门推荐
Leayh
05-22 13万+
背景 在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。 keyCode 实际键值 48到57 0到9 65到90 a到z（...
使用Vue-Grid-Layout实现自定义工作台
最新发布
02-01
使用Vue-Grid-Layout实现自定义工作台
vue事件修饰符和按键修饰符用法总结
12-03
之前关于vue事件修饰符和按键修饰符的一点分析，最近需要回顾，就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现...
Vue-Ant Design Vue-普通及自定义校验实例
01-18
这段时间在使用Ant Design Vue进行项目的前端部分开发，进行一个记录，分享… Ant Design Vue Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。在GitHub上可以找到几个Ant Design的Vue...
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
01-21
产品开发用的是 vue, 经同事介绍使用了vue-video-player 视频播放插件，通过 demo 案例很快实现了视频播放效果   <video-player class=vjs-custom-skin ref=videoPlayer1 :options=playerOptions :...
Vue自定义组件实现按钮权限功能
beyond丿灬的博客
10-26 2876
在这之前请看我上一篇博客https://blog.csdn.net/qq_41594146/article/details/83381964,这里有思路和数据库设置,之前做的是没有组件化,也就是单纯的v-for循环直接显示,刚刚写了按钮权限的组件,现在贴上代码\ var myButton=Vue.extend({//设置标签 props:['names','item2...
vue-模板语法-按键修饰符与自定义按键修饰符
gaogzhen的博客
07-20 209
vue-模板语法-按键修饰符与自定义按键修饰符 目录 文章目录1、按键修饰符2、自定义按键修饰符3、案例-简单计算器***后记*** ： 内容 1、按键修饰符 格式： <标签 @keyup.别名="事件处理"></标签> 按键修饰符 ：vue为最常用的按键提供别名 keyup keyCode 描述 enter 13 回车 tab 9 制表符 esc 27 退出 space 32 空格 up 38 方向键：上 down 4
vue中的@keyup事件
a476613958的博客
04-13 470
vue中的@keyup事件 代码 描述 @keyup.enter 回车按键松开 @keyup.down 下键按键松开 @keyup.up 上键按键松开 @keyup.left 左键按键松开 @keyup.right 右键按键松开 @keyup.delete 删除键松开 <div> <input type="password" @keyup.enter="ChangeKeyup"/&
v-band 属性绑定
qq_44822110的博客
03-23 3248
Vue实现属性绑定 v-band v-band 简写 “：” <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...
VUE数据填充
qq_44822110的博客
03-14 1140
v-text 填充纯文本：填充纯文本内容 v-html 填充HTML片段：会解析HTML标签 v-pre 填充原始信息 跳过编译过程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w...
vue样式绑定，数组方式
qq_44822110的博客
03-23 540
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Vue&...
vue样式绑定，对象方式
qq_44822110的博客
03-23 247
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello Vue&...
vue实现选项卡案例
qq_44822110的博客
03-23 229
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> .tab ul { overflow: hidden; ...
Vue实现简单计算器
qq_44822110的博客
03-23 223
实现简单计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
vue v-model 的修饰符
05-12
Vue中的v-model指令是用于实现双向绑定的，它可以将表单元素的值与组件的数据进行双向绑定。而修饰符则是用于改变v-model指令的行为。常见的v-model修饰符如下： ... // 自定义修饰符的处理逻辑 } }) ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值