vue click.stop
<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的更多相关文章
- vue click事件 v-on:click
v-on:click <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- vue - @click 用到的修饰符
1.vue提供的方法 .stop .prevent .capture .self .once .passive <!-- 阻止单击事件继续传播 --><a v-on:click.st ...
- vue click事件获取当前元素属性
Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event) ...
- vue click.stop阻止点击事件继续传播
<div id="app"> <div @click="dodo"> <button @:click="doThis&q ...
- vue @click.native
1,给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符) 2,等同于在自组件中: 子组件内部处理click事件然后向外发送click事件 ...
- vue @click 使用三目运算(实现动态更换绑定的函数)
转载:https://www.jianshu.com/p/ea4471c9f333 @click 错误写法 @click="dialogStatus=='create'?createData ...
- vue @click传字符串
参考: https://www.cnblogs.com/springlight/p/5782637.html 关键:使用转译字符 \ 来转译引号 方法一. 直接传递: var tem = " ...
- vue - @click 传参删除
<template> <div id="app"> <div v-for="todo in todos" :key ...
- 实现点击页面其他地方,隐藏div(原生和VUE)
1原生方法 // html <div id="box" style="width:110px;height:110px;background-color:red&q ...
随机推荐
- 【线性代数】3-6:四个子空间的维度(Dimensions of the Four Subspaces)
title: [线性代数]3-6:四个子空间的维度(Dimensions of the Four Subspaces) categories: Mathematic Linear Algebra ke ...
- BUUCTF平台-web-边刷边记录-1
1.WarmUp 思路很清晰,文件包含,漏洞点在代码会二次解码,只需注入一个?就可以使用../../进行路径穿越,然后去包含flag,flag路径在hint.php里面有 2.easy_tornado ...
- 黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
- token的解码及 判断值不为空的方法
token 的解码要使用插件:jwt-decode 判断值不为空的方法: function isEmpty(value){ return ( value === undefined || value ...
- qt+opencv编译环境的配置
第一步:安装与配置Qt 从https://account.qt.io/downloads下载Qt,并注册账户.开始安装.首先下载qt-opensource-windows-x86-mingw482_o ...
- npm 权限
将npm默认目录定向到其他你具有读写权限的目录 很多时候你可能并不想改变npm所用的默认目录(如/usr)的拥有者,因为这可能会导致一些问题,比如你在与其他用户共用此系统时. 这时,你可以设置npm整 ...
- 在React中修改antd的样式
1.在Component的Radio中加个style={radioStyle}. <RadioGroup> <Radio style={radioStyle} value={}> ...
- 表单中使用<button>的注意点
本文主要记录了我调查问题的思路想法,想看结论的同学直接拖到最后吧 上周在做项目的时候,有一个需求是在页面中加一个按钮,点一下查询数据库将内容填充在表格中.这不是很简单嘛,页面加个按钮,发送ajax请求 ...
- iOS创建带删除线和价钱符号的Label
效果显示如下: 只需要子类化Label,重写DrawRect()方法即可: #import "MyLabel.h" @implementation MyLabel - (insta ...
- Spring Cloud(4):断路器(Hystrix)
Hystrix介绍 相对于单一系统,分布式系统更容易遇到故障,所以我们一般通过构建冗余,使用集群和负载均衡来保证系统的弹性和高可用.当然,这种方式只解决了一部分问题,当服务崩溃时,我们很容易检测到,因 ...