Vue的常见修饰符

.stop 修饰符的作用是阻止冒泡

<div @click="clickEvent(2)" style="width:300px;height:100px;background:red"> <button @click.stop="clickEvent(1)">点击</button> </div>

不加 stop 点击按钮输出 1 2

加了 stop 点击按钮输出 1

.once 修饰符的作用是，事件只执行一次

<div @click.once="clickEvent(2)" style="width:300px;height:100px;background:red"> <button @click="clickEvent(1)">点击</button> </div>

不加 once 多次点击按钮输出 1

加了 once 多次点击按钮只会输出一次 1

.prevent 修饰符的作用是阻止默认事件（例如a标签的跳转）

<a href="#" @click.prevent="clickEvent(1)">点我</a>

不加 prevent 点击a标签 先跳转然后输出 1

加了 prevent 点击a标签 不会跳转只会输出 1

标签：输出,常见,prevent,修饰符,点击,Vue,按钮,跳转
来源： https://blog.csdn.net/weixin_48728002/article/details/120176717