<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止冒泡</title>
<script src="js/vue.js"></script>
</head>
<body>
<div class="main" @click="a">
<span @click.stop="b">我是Span <i @click.stop="c">我是i</i></span>
</div>
<script>
var example1 = new Vue({
el:".main",
data: {
counter: 0
},
methods:{
a(){
alert('我是div');
},
b(){
alert('我是span');
},
c(){
alert('我是i');
}
}
})
</script>
</body>
</html>

Vue阻止冒泡的更多相关文章

  1. vue 阻止冒泡 @click.stop=

    vue 阻止冒泡 @click.stop= vue中处理冒泡标准姿势 事件修饰符 Vue.js 为 v-on 提供了事件修饰符,修饰符是由点开头的指令后缀来表示的.这些事件修饰符主要有以下几个: st ...

  2. vue 阻止冒泡弹窗小案例( 知识点:@click.stop=''")

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 重新认识vue之事件阻止冒泡

    冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...

  4. vue 点击事件阻止冒泡 用stop

    1.使用vue阻止子级元素的click事件冒泡,很简单,用stop.eg: @click.stop='xxx'

  5. vue阻止事件冒泡和默认事件

    本文地址:https://www.cnblogs.com/guomin/p/9273862.html 原生js取消事件冒泡 try{ e.stopPropagation();//非IE浏览器 } ca ...

  6. vue之冒泡阻止

    用了Element ui写页面 <el-dropdown-menu slot="dropdown"> <el-dropdown-item> <el-s ...

  7. Js阻止冒泡,Vue中如何阻止冒泡事件

    js解决冒泡:event.stopPropagation() vue解决冒泡: 事件.stop,例如:@click.stop="" ,@mouseover.stop="& ...

  8. 一个事件一定时间内只允许点击执行一次 与 vue阻止滚动穿透

    可能我的方法很笨,简单实现来的就是给两个状态,一个状态点击时就发生改变,另外一个给一个定时器延迟改变 篮圈部分,给了两种状态,一个isDisable,一个comeTime 点击事件以后comeTime ...

  9. JS点击子元素不触发父元素点击事件(js阻止冒泡)

    js阻止冒泡 <html> <title></title> <head> <meta charset="utf-8"> ...

随机推荐

  1. Java基础学习 —— 对象的克隆

    对象的克隆分为对象的浅克隆和深克隆 一.对象的浅克隆 注意事项: 1.如果一个对象需要调用clone的方法克隆,那么该对象必须要实现Cloneable接口 2.Cloneable对象只是一个标识对象, ...

  2. JavaSE(十)集合之List

    前面一篇的corejava讲的是集合的概述,这一篇我将详细的和大家讲解一下Collection下面的List.set.queue这三个子接口.希望大家能得到提升. 一.List接口 1.1.List接 ...

  3. IPsec_VPN实现技术【转载】

    GRE Tunnel GRE Tunnel(General Routing Encapsulation 通用路由封装)是一种非常简单的VPN(Virtual Private Network 虚拟专用网 ...

  4. 自制MPLS解决路由黑洞实验

    利用mpls解决BGP路由黑洞配置命令全解析 --By Jim 什么是BGP路由黑洞? BGP规定无论路由器是否启动bgp都要无条件地转发BGP消息和更新包(凌驾于IGP之上),违背了IGP" ...

  5. 微信小程序xml解析

    准备: 下载xmldom库:https://github.com/jindw/xmldom 将dom.js.dom-parser.js.sax.js,entities.js拷贝微信小程序需要的文件夹下 ...

  6. 《Java程序设计》第5周学习总结

    1. 本章学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 2. 书面作业 1. 代码阅读:Child压缩包内源代码 1.1 com.par ...

  7. Backtrack下的dns爆破工具的目录

    直接可以切换到 /pentest/enumeration/dns#

  8. CMD命令查询DNS服务器

    我们先了解"tracert"命令,如图 tracert命令 这是路由跟踪命令,你打开网站通过了哪些网关都能看出来,比如: tracert命令 这是路由跟踪命令,你打开网站通过了哪些 ...

  9. 201521123013 《Java程序设计》第10周学习总结

    1. 本章学习总结 2. 书面作业 Q1.finally题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? finally块中的异常必须在fina ...

  10. 201521123068 《java程序设计》 第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1.MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己 ...