vue之事件修饰符
修饰符
| 事件修饰服 | 释义 |
|---|---|
| .stop | 只处理自己的事件，子控件不再冒泡给父控件 |
| .self | 只处理自己的事件，子控件的冒泡不处理 |
| .prevent | 阻止a标签链接的跳转，也可以修改跳转页面 |
| .once | 事件只会触发一次(适用于抽奖页面) |
.stop事件
<div id="app">
<ul @click="clickUl">
<li @click="clickLi">点我触发事件</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
clickLi() {
console.log('我是li事件')
},
clickUl(){
console.log('我是ul事件')
}
},
})
</script>
当点击li的事件时，也会触发ul的事件，如下图
<div id="app">
<ul @click="clickUl">
<li @click.stop="clickLi">点我触发事件</li> <!--在子事件中加了.stop事件-->
</ul>
</div>
增加了.stop事件后，再点击li标签，不会再触发li事件
.self事件
此事件基本也.stop事件效果相同，只触发发自己的事件，子控冒泡的不处理
<div id="app">
<ul @click.self="clickUl"> <!--事件写在父标签中，不再处理子控件的冒泡-->
<li @click="clickLi">点我触发事件</li>
</ul>
</div>
.prevent事件
<div id="app">
<!--添加.prevent事件后，不再跳转到href指定的地址，可以手工设置跳转的地址-->
<a href="http://www.baidu.com/" @click.prevent="clickA">点我跳转</a>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
clickA(){
// 当系统指定的跳转地址后，阻止用户a标签的跳转后，会跳转到指定的地址
location.href = "http://www.cnblogs.com/"
}
},
})
</script>
.once事件
<body>
<div id="app">
<!--在添加.once后，只会触发一次点击事件，刷新后才会再次触发-->
<button @click.once="clickBtn">点我</button>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
clickBtn(){
console.log('hello world')
}
},
})
</script>
vue之事件修饰符的更多相关文章
- Vue的事件修饰符
转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...
- 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 027——VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- vue中事件修饰符详解(stop, prevent, self, once, capture, passive)
==.stop== 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 ==.prevent== 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提 ...
- 028——VUE中事件修饰符once
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue2.0学习笔记：Vue事件修饰符的使用
事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
- 怎样在 Vue 中使用 事件修饰符 ?
Vue 中可以通过 v-on 来绑定事件监听函数, 不过事件会有许多额外情况, 比如 是否阻止冒泡 / 是否阻止重载 / 是否限制点击次数 / 是否可以通过按键触发 等等. 这时就需要使用到 事件修饰 ...
- vue第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- vue中的修饰符
Vue2.0学习笔记:Vue事件修饰符的使用 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理 ...
随机推荐
- js获取当前日期的前七天，月份+日（数组）
1.定义一个空对象. let dayArr = []: 2.时间格式化 function formatterDate(date,fmt){ let nowDate = { yyy ...
- 每日一题_1_x^n
函数头为double power(double x,int n).在主函数中输入x.n并调用该函数求 (函数定义在主函数后面,在调用前做函数声明) 输出x^n 1 #define _CRT_SECUR ...
- 【项目记录】2：python3 使用MySQL 出现RuntimeError: 'cryptography' package is required for sha256_password or caching_sha2_password auth methods 报错
报错是因为缺少了一个库 cryptography 导入了就好了. ps:如果是本机,输入IP会报错,直接使用localhost可连接数据库
- python 购物小程序
要求: 1.启动程序后,让用户输入预算,然后打印商品列表 2.允许用户根据商品编号购买商品 3.用户选择商品后,检测余额够不够,够就直接付款,不够就提醒 4.可随时退出,推出时打印已购买商品和余额 ...
- 如何跳出forEach循环
for(let ii in this.listData){ console.log("提交前数据",ii) try{ this.listData[ii].forEach((el,i ...
- flask-script的简单使用
1.Flask-Script介绍Flask-Script的作用是可以通过命令行的形式来操作Flask.Flask Script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定 ...
- 实验3 C语言分支语句和循环语句编程应用
任务一 #include<math.h> #include<stdio.h> int main() { float a,b,c,x1,x2; float delta,real, ...
- 2020.4.28关于pta的总结
0.前言 这次作业针对的是oo程序设计第二单元(5-8周)的作业,在整体当中属于第4到第6次作业. 此三次作业的知识要点为:继承类,多态性,字符串,结构类,接口类. 此三次作业的时间为20.4.12- ...
- Blog作业03
目录 前言 设计与分析 踩坑心得 改进建议 总结 前言 这三次作业的题目只有2道题,但是在题量减小的同时,这三次作业集的难度也相应的上去了,题目的质量很好,运用很广泛,也考验了很多的知识点.这三次的作 ...
- FTP文件夹错误：【打开FTP服务器上的文件夹时发生错误。请检查是否有权限访问该文件夹】
资源管理器访问FTP服务器报错,提示FTP文件夹错误:[打开FTP服务器上的文件夹时发生错误.请检查是否有权限访问该文件夹]. 详细信息: 200 Switching to ASCII mode. 2 ...