Vue事件修飾符

Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：

event.preventDefault() 或 event.stopPropagation()。

Vue.js通過由點 (.) 表示的指令后綴來調用修飾符。

.stop
.prevent
.capture
.self
.once

<!-- 阻止單擊事件冒泡 -->

&lt;a v-on:click.stop="doThis"&gt;&lt;/a&gt;

<!-- 提交事件不再重載頁面 -->

&lt;form v-on:submit.prevent="onSubmit"&gt;&lt;/form&gt;

<!-- 修飾符可以串聯 -->

&lt;a v-on:click.stop.prevent="doThat"&gt;&lt;/a&gt;

<!-- 只有修飾符 -->

&lt;form v-on:submit.prevent&gt;&lt;/form&gt;

<!-- 添加事件偵聽器時使用事件捕獲模式 -->

&lt;div v-on:click.capture="doThis"&gt;...&lt;/div&gt;

<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->

&lt;div v-on:click.self="doThat"&gt;...&lt;/div&gt;

<!-- click 事件只能點擊一次，2.1.4版本新增 -->

&lt;a v-on:click.once="doThis"&gt;&lt;/a&gt;

原文地址：https://segmentfault.com/a/1190000016689265

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的Vue—事件修饰符的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。