<!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. [ASP.NET MVC]笔记（二） 数据注解和验证

    验证注解的使用 1.Required:必须字段 [Required] public string FirstName() { get; set; } 2.StringLength:长度限制,或是可选项 ...

  2. Redis 常用数据结构及其控制命令整合

    Redis 键值支持5种基本结构,分别是字符串,列表,哈希,集合,有序集合.每一种数据结构都有对应的取值和设值命令,辅助命令,除此之外,还有一些全局命令,用来管理Redis存储的所有 键. 全局命令 ...

  3. java.lang.ClassNotFoundException: com.sun.jna.Native

    在使用sprng boot加elasticsearch的时候遇到 java.lang.ClassNotFoundException: com.sun.jna.Native,百度之后要我导入 <d ...

  4. Sudoku Generator

    Sudoku 算法 标签(空格分隔): 软工实践 设想:通过第一行,来生成2, 3行的排列,再通过1 - 3 生成4 - 6排列. 2 3 行的生成由上一行生成 公式为$grid[i][j] = gr ...

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

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 2. 书面作业 1.List中指定元素的删除(题目4-1) 1.1 实 ...

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

    1. 本周学习总结 2. 书面作业 Q1.List中指定元素的删除(题目4-1) 1.1 实验总结 Ans: 在这一题中我们需要写两个函数,分别是remove()和convertStringToLis ...

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

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点 1.2 可选:使用常规方法总结其他上课内容 课上讲了一些Markdown的用法,包括分割线.参考链接.代码引入等等. 2. 书面 ...

  8. animation实现动画效果

    CSS3 animation 属性 CSS 参考手册 实例 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-anim ...

  9. java：java构造器和java方法的区别

    构造函数(构造器)是一种特殊的函数.其主要功能是用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中.构造函数与类名相同,可重载多个不同的构造函数.在JA ...

  10. python只re模块

    while True: phone_number=input('please input your phone number:') if len(phone_number)==11 \ and pho ...