[踩坑记录] Vue自定义按键修饰符无效 Vue属性绑定无效

最新推荐文章于 2022-10-12 11:44:12 发布
最新推荐文章于 2022-10-12 11:44:12 发布
阅读量1.7k 收藏
点赞数
分类专栏： 踩坑记录 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39400208/article/details/104952435
版权

先上结论：

一般浏览器会把属性名转成小写，这一步应该是在vue解析之前进行的。
所以vue获取到的其实是@keyup.diyf2，但函数里写的是diyF2，其实是没有绑定成功的。
同时也可以试一下，在标签里写diyF2，js里写diyf2，也是可以绑定的。

问题：

在这里插入图片描述

古镇渔夫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中el-input绑定键盘按键(按键修饰符)
11-20
vue允许将按键值作为修饰符来使用，如监听回车事件，有两种写法，如下代码： <input type="text" @keyup.13="console.log($event)"></input> <input type="text" @keyup.enter="console.log($event...
Karabiner Elements改键
weixin_44520133的博客
06-07 412
买了个蓝牙键盘发现按键不对，通过键盘里的修饰键改，发现无效 最后过Karabiner Elements解决了这个问题
Vue Element-ui 键盘事件失效
一个水瓶座程序猿的博客
05-25 4484
按键修饰符 vue中提供了一些按键修饰符，开发者可以直接通过按键修饰符捕捉键盘事件 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 例如：.enter <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> 但是在开发过程
@Component 修饰器在此处无效。ts(1206)
cxk_ctrl的博客
05-18 1554
此时引用组件会报错 Unknown custom element: <preview-form> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 解决办法 装饰器必须直接位于导出的类之前 示例： @Component({ name: "ArchiveReviewForm", components: {
(转)vue v-on修饰符
青椒的博客
04-07 387
1、stop 功能：阻止事件冒泡 使用方法: <button v-on:click.stop="show">B</button> 举例： <div id="app"> <div style="width: 100px;height: 100px;background-color: #008000;" v-on:click="show"> ...
ant design pro 代码学习(六) ----- 知识点总结2
夕阳枫的博客
07-10 4239
1 、connect 多个model   以下为redux的API中对connect方法的定义： connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])   实际过程中使用最多的是mapStateToProps（另外两个参数暂时不做讨论），如果定义该参数，组件将会监听 Redux store ...
模仿京东输入内容案例
Jessicawh的博客
08-24 356
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
Vue input控件通过value绑定动态属性及修饰符的方法
01-21
对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）： <!-- 当选中时，`picked` 为字符串 a --> <input type=radio v-model=picked value=a> <!--...
vue .sync修饰符的使用详解
12-10
vue的官网介绍非常不错，先通读一遍。 2.3.0+ 新增 在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有...
解决使用elementUi的input组件时，vue案件修饰符不生效的问题
oqqSan123456789000的博客
05-02 745
<el-input v-model="input" placeholder="请输入内容" @keyup.delete.native="KeyUpDelete"></el-input> 为什么这次绑定事件多一个.native修饰符，这个可能是因为element-ui封装了个div在input标签外面，把原来的事件隐藏了，所以如果不加.native的话，按键不会生效 官方对.native修饰符的解释为： 　　有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on.
Vue中关于自定义组件定义@click事件不生效的解决办法
Mxt623的博客
10-12 2188
比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加。就是在子组件中添加this.$emit ( “事件名” ，value )方法 将子组件的值传到父组件再进行处理。当你给一个vue组件或者是自定义组件绑定事件的时候，要加上native，如果是普通的html元素，就不需要。还有另外一种解决方式。
vue.js框架 3（过滤器、按键修饰符、自定义v-指令）
这里的分享，都是干货
03-13 464
vue.js框架1、筛选过滤2、过滤器的使用3、字符串的padStart方法4、按键修饰符5、自定义v-指令：directive（） 1、筛选过滤 2、过滤器的使用 过滤器 | 可以使用正则 管道后面的函数传参 过滤器多次调用：这里的过滤器Vue.filter是全局的 字符串拼接：占位符 私有过滤器 3、字符串的padStart方法 4、按键修饰符 js里面内置了键盘事件...
vue基础——自定义按键修饰符
qq_41929578的博客
10-03 255
自定义按键修饰符 自定义按键值 Vue.config.keyCodes.按键名 = 按键码; 案例：按a输出所输入的内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div i
Vue3+ts（使用了vue-class-component修饰器）遇到的坑
li336699li的博客
05-21 5183
本人也是刚对Vue3进行了解，我只讲我在了解Vue3+ts语法（使用了vue-class-component修饰器）中遇到的坑，闲话不多说开干. 本次了解中我遇到的 第一个问题就是vue.config.ts配置文件代理不生效，更改项目运行端口无效，具体不知什么原因，需要更改为vue.config.js文件才对代理，及运行端口生效；如果是ts的配置文件就会出现代理端口404 图： 这个图就是我的配置文件为vue.config.ts出现为404，最后我更改为vue.config.js文件该接口才返回200的状
Vue键盘回车事件无效
热门推荐
小天才程序员的博客乐园
09-29 1万+
文章目录按键修饰符 按键修饰符 vue中提供了一些按键修饰符，开发者可以直接通过按键修饰符捕捉键盘事件 <input v-on:keyup.enter="submit"> 但是在开发过程中会遇到不生效的情况，解决办法就是加上 .native 修饰 <input v-on:keyup.enter.native="submit"> ...
vue的键盘事件直接绑定无效？
Bright2017的博客
10-12 9833
vue键盘事件
【Vue笔记整理七】按键修饰符（Vue事件三）
小异常的博客
12-01 318
本篇博客主要讲解 Vue 事件 中的 按键修饰符，按键修饰符 与键盘中的按键事件绑定在了一起，用来修饰特定的按键。 本篇博客我会给大家介绍九个常用的 按键修饰符：.enter、.tab、.delete（捕获“删除”和“退格”键）、.esc、.space、.up、.down、.left、.right。
vue.js 按键修饰符
毛没齐的博客
07-29 1103
在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： //在输入框按下回车键时调用方法 &lt;input type="text" v-on:keyup.13="logname" value="name" &gt; //在输入框按下Shift键时调用方法 &lt;input type="text" v-on:keyup.16="lo
Vue之按键修饰符的使用
朦胧星海
05-12 2669
在监听键盘的事件时，我们常常需要检查常见的键值。Vue允许为v-on在监听键盘事件时添加按键修饰符.常用的按键别名有：.enter.tab.delete（捕获“删除”和”退格“键）.esc.space.up.down.left.right应用小例子：在文本框中输入内容，当点击enter或者space时，弹出警告代码如下：&lt;!DOCTYPE html&gt;&lt;!--监听键盘事件--&gt...
vue2 如何用js给dom绑定按键修饰符
最新发布
06-09
Vue2 中可以使用 `v-on` 指令来为 DOM 元素绑定键盘事件，并使用修饰符来指定按键修饰符。具体方式如下： 1. 在模板中使用 `v-on` 指令绑定键盘事件，如下所示： ```html <div v-on:keydown="onKeyDown"></div> ``...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值