<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. Java线程之创建线程

    翻译自:https://www.journaldev.com/1016/java-thread-example 进程 进程是一个自包含的执行环境,它可以被看成一个程序或应用程序.然而一个应用程序本身包 ...

  2. 2016"百度之星" - 初赛(Astar Round2A)1006 Gym Class(HDU5695)——贪心+拓扑排序

    分析:首先,利用贪心可知,如果要所有人的分数和最高,需要把序号大的优先放在前面.其次,对于a的前面不能为b,那么只能a在b前面了,那么就建立一条从a到b的边,并且b的入度加1.然后就是拓扑排序了.要分 ...

  3. jwt token and shiro

    openapi可以完全开放访问,也可以使用jwt token进行简单的认证,还可以使用shiro支持更细致的权限管理. handler.yml配置了security和shiro两个handler: s ...

  4. ORA-12899 导入失败

    主要是目标数据库的字符集与导入文件的字符集不符 SQL>SHUTDOWN IMMEDIATE SQL>STARTUP MOUNT SQL>ALTER SYSTEM ENABLE RE ...

  5. Hander创建消息

    每一个消息都需要被指定的Handler处理,通过Handler创建消息便可以完成此功能.Android消息机制中引入了消息池.Handler创建消息时首先查询消息池中是否有消息存在,如果有直接从消息池 ...

  6. java ldap用户密码md5加密

    在这里不过多介绍ldap,因为这样的文章特别多,这里就简单直接的记录这一个问题. 在springboot中通过引入spring-boot-starter-data-ldap,使用LdapTemplat ...

  7. a lot of attention under the hood

    Because one of the original goals of the Node.js project was to allow developers to easily build app ...

  8. ElasticSearch——常用命令

    集群相关 --查询集群健康状态 GET _cluster/health --查询所有节点 GET _cat/nodes --查询索引及分片的分布 GET _cat/shards --查询指定索引分片的 ...

  9. coreseek(sphinx) 全文检索

    转自: http://blog.csdn.net/aidandai/article/details/50464793 编译错误解决--sphinx-0.9.9 I tried to install t ...

  10. 树莓派搭建bt下载机、即是安装transmission

    Transmission是一种BitTorrent客户端, 安装:sudo apt-get install transmission-daemon 给用户授权:sudo usermod -a -G p ...