vue事件修饰符与按钮修饰符
事件修饰符:(当事件无需传参数时可直接写成以下形式,有参数时则为@click.stop="handleLiClick($event)"
)
stop:阻止事件冒泡行为(子元素被点击,会触发父元素的点击事件)
<ul @click="handleLiClick"><li @click.stop="handleLiClick">111</li></ul>
self:识别是否为自己的点击事件
<ul @click.self="handleLiClick"><li @click="handleLiClick">111</li></ul>
once:事件执行一次后自动取消事件绑点
<ul @click.self="handleLiClick"><li @click.once="handleLiClick">111</li></ul>
prevent:阻止元素的默认行为
<a href="http://www.baidu.com" @click.prevent="verificationData()">返回</a>如果不加prevent修饰,当点击此链接后会触发点击事件随后跳转到百度首页,反之则只执行点击事件
按钮修饰符:
以下为两种方式案例:
<input type="text" @keyup.87="handlerEnter($event)">87为按键的keyCode
<input type="text" @keyup.enter="handlerEnter($event)"enter为按键的名字>
如果不知道按键的keyCode,可以先在页面触发事件,将键对应的keyCode输出到控制台,拿到keyCode后再代入到代码中
handlerEnter(e){ console.log(e.keyCode); }
最新文章
- 如何在ASP.NET Core中实现一个基础的身份认证
- CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式
- getIdentifier()获取资源Id
- Apache解析漏洞详解
- oAuth协议学习
- iBatis 的插入一个实体
- 改动项目APP名字后,在真机执行报错:The provisioning profile specified in your build settings (“haotian”) has an AppI
- ASP.NET、WinForm、C# - 配置文件信息读取 [ Web.config || Appconfig ]
- Reactive Extensions(Rx)并发浅析
- select onchagnge 弹出自己的文本值
- 1010: [HNOI2008]玩具装箱toy [dp][斜率优化]
- Flutter路由导航Navigator
- AGC电路以及AD8347正交解调芯片
- 2017-11-07 中文代码示例之Angular入门教程尝试
- 【error】&#39;isnan&#39; was not declared in this scope
- 随手记:tomcat 与JDK 安装与配置
- 函数式编程——C#理解
- elasticsearch(六) 之 elasticsearch优化
- kvm图形化管理工具
- 【10.6校内测试】【小模拟】【hash+线段树维护覆盖序列】
热门文章
- Kubernetes实践踩坑系列(一).应用管理的难题
- Kubernetes学习笔记(七):访问Pod元数据与Kubernetes API
- openxl模块从excel里面读取数据
- 读Pyqt4简介,带你入门Pyqt4 _001
- 图解MySQL索引(二)—为什么使用B+Tree
- MethodHandle(方法句柄)系列之一:MethodHandle和MethodType
- ASP.NET关于书籍详情和删除的Demo(HttpHandler进行页面静态化[自动生成html网页]+Entity Framework通过类创建数据库+EF删查)
- Java实现 蓝桥杯 算法提高VIP 摆花 dp 记忆搜索 2种做法 多重背包
- Java实现 LeetCode 733 图像渲染(DFS)
- Java实现 LeetCode 649 Dota2 参议院(暴力大法)