<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. 【线性代数】3-6:四个子空间的维度(Dimensions of the Four Subspaces)

    title: [线性代数]3-6:四个子空间的维度(Dimensions of the Four Subspaces) categories: Mathematic Linear Algebra ke ...

  2. BUUCTF平台-web-边刷边记录-1

    1.WarmUp 思路很清晰,文件包含,漏洞点在代码会二次解码,只需注入一个?就可以使用../../进行路径穿越,然后去包含flag,flag路径在hint.php里面有 2.easy_tornado ...

  3. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  4. token的解码及 判断值不为空的方法

    token 的解码要使用插件:jwt-decode 判断值不为空的方法: function isEmpty(value){ return ( value === undefined || value ...

  5. qt+opencv编译环境的配置

    第一步:安装与配置Qt 从https://account.qt.io/downloads下载Qt,并注册账户.开始安装.首先下载qt-opensource-windows-x86-mingw482_o ...

  6. npm 权限

    将npm默认目录定向到其他你具有读写权限的目录 很多时候你可能并不想改变npm所用的默认目录(如/usr)的拥有者,因为这可能会导致一些问题,比如你在与其他用户共用此系统时. 这时,你可以设置npm整 ...

  7. 在React中修改antd的样式

    1.在Component的Radio中加个style={radioStyle}. <RadioGroup> <Radio style={radioStyle} value={}> ...

  8. 表单中使用<button>的注意点

    本文主要记录了我调查问题的思路想法,想看结论的同学直接拖到最后吧 上周在做项目的时候,有一个需求是在页面中加一个按钮,点一下查询数据库将内容填充在表格中.这不是很简单嘛,页面加个按钮,发送ajax请求 ...

  9. iOS创建带删除线和价钱符号的Label

    效果显示如下: 只需要子类化Label,重写DrawRect()方法即可: #import "MyLabel.h" @implementation MyLabel - (insta ...

  10. Spring Cloud(4):断路器(Hystrix)

    Hystrix介绍 相对于单一系统,分布式系统更容易遇到故障,所以我们一般通过构建冗余,使用集群和负载均衡来保证系统的弹性和高可用.当然,这种方式只解决了一部分问题,当服务崩溃时,我们很容易检测到,因 ...