<div id="app">
<div v-on:click="dodo">
<button v-on:click="doThis">阻止单击事件继续传播</button>
</div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js"
},
methods: {
doThis: function () {
alert("noclick");
},
dodo: function () {
alert("dodo");
}
}
});
</script>
将会先弹出“noclick”,再弹出“dodo”。
  <div id="app">
<div v-on:click="dodo">
<button v-on:click.stop="doThis">阻止单击事件继续传播</button>
</div>
</div> <script>
var app = new Vue({
el: "#app",
data: {
name: "Vue.js"
},
methods: {
doThis: function () {
alert("noclick");
},
dodo: function () {
alert("dodo");
}
}
});
</script>
只弹出“noclick”
 

vue click.stop的更多相关文章

  1. vue click事件 v-on:click

    v-on:click <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. vue - @click 用到的修饰符

    1.vue提供的方法 .stop .prevent .capture .self .once .passive <!-- 阻止单击事件继续传播 --><a v-on:click.st ...

  3. vue click事件获取当前元素属性

    Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event) ...

  4. vue click.stop阻止点击事件继续传播

    <div id="app"> <div @click="dodo"> <button @:click="doThis&q ...

  5. vue @click.native

    1,给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符) 2,等同于在自组件中: 子组件内部处理click事件然后向外发送click事件 ...

  6. vue @click 使用三目运算(实现动态更换绑定的函数)

    转载:https://www.jianshu.com/p/ea4471c9f333 @click 错误写法 @click="dialogStatus=='create'?createData ...

  7. vue @click传字符串

    参考: https://www.cnblogs.com/springlight/p/5782637.html 关键:使用转译字符 \ 来转译引号 方法一. 直接传递: var tem = " ...

  8. vue - @click 传参删除

    <template>   <div id="app">      <div v-for="todo in  todos" :key ...

  9. 实现点击页面其他地方,隐藏div(原生和VUE)

    1原生方法 // html <div id="box" style="width:110px;height:110px;background-color:red&q ...

随机推荐

  1. Codevs 1169 传纸条 2008年NOIP全国联赛提高组

    1169 传纸条 2008年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 小渊和小轩是好朋友也是同班 ...

  2. 【记录】springboot项目的maven的pom.xml文件第一行报错 Unknown Error

    原因 : maven的插件版本的问题,造成与IDE的不兼容 解决办法 :在pom中加上 <maven-jar-plugin.version>3.1.1</maven-jar-plug ...

  3. DDCTF-2018-writeup(5misc)

    打了好几天最后也只是80多名,我好菜啊.jpg 0x00  (╯°□°)╯︵ ┻━┻ 题目: (╯°□°)╯︵ ┻━┻ d4e8e1f4a0f7e1f3a0e6e1f3f4a1a0d4e8e5a0e6 ...

  4. Python list 遇到的问题

    1.list“+” 运算 <list += > diff. <ndarray +=> list1 += list2是追加,而不是加法运算 list1 = [0,0,0] lis ...

  5. shapefile 输出的地理处理注意事项

    多年来,ESRI 为存储地理信息开发了三种主要数据格式 - coverage 格式.shapefile 格式及地理数据库格式.其中,所开发的 Shapefile 为存储地理及属性信息提供了一种简单的非 ...

  6. C# List中的ForEach

    ; List<string> aaa = new List<string>(){ "aaa", "bbb" }; aaa.ForEach ...

  7. @Transactional(事务讲解)和springboot 整合事务

    概述 事务在编程中分为两种:声明式事务处理和编程式事务处理 编程式事务处理:编码方式实现事务管理,常与模版类TransactionTemplate(推荐使用) 在业务代码中实现事务. 可知编程式事务每 ...

  8. vsCode安装todo插件

    使用过IDEA或者WebStrom的阿媛应该都知道他们都有一个TODO功能,方便我们跟踪注释,或者说是我们在项目代码里面所做的标记:但是如果你现在在使用vsCode,你会发现,没有TODO功能,幸好, ...

  9. mybatis多对多映射【学生与课程】

    1)如图 2)创建students.sql和courses.sql和middles.sql drop table middles; drop table students; drop table co ...

  10. python同时执行两个函数

    使用两个线程同时执行两个函数, def fun1(): while True: time.sleep(2) print("fun1") def fun2(): while True ...