Vue 事件修饰符

Vue事件修饰符:stop、once、selt、prevent、capture

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身 (比如不是子元素) 触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

关于.stop和.self的区别,前者是防止事件冒泡,后者则是忽略了事件冒泡和事件捕获的影响,只有直接作用在该元素上的事件才会被调用。

...
<div @click="handler1">
	handler1
	<div @click="handler2">handler2</div>
</div>
...
handler1() {
	console.log('handler1')
}
handler2() {
	console.log('handler2')
}
...

点击handler2发生事件冒泡,输出:

handler2
handler1

stop

<div @click="handler1">
	handler1
	<div @click.stop="handler2">handler2</div>
</div>

添加.stop事件修饰符阻止事件冒泡,输出:

handler2

self

<div @click.self="handler1">
	handler1
	<div @click="handler2">handler2</div>
</div>

添加.self事件修饰符,只有作用在该元素上的事件起作用,输出:

handler2

once

<div @click="handler1">
	handler1
	<div @click.once="handler2">handler2</div>
</div>

添加.once事件修饰符,handler2只能触发一次点击事件

第一次点击handler2,输出:

handler2
handler1

第n次点击handler2,输出:

handler1

prevent

<a href="https://www.baidu.com" @click.prevent="other">百度</a>

添加.prevent事件修饰符,阻止默认事件,执行other事件

  • 2
    点赞
  • 0
    评论
  • 6
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值