vue 事件修饰符（阻止默认行为和事件冒泡）

最新推荐文章于 2023-11-28 17:29:30 发布

博迪

最新推荐文章于 2023-11-28 17:29:30 发布

阅读量706

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_43033775/article/details/114623710

版权

vue 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了Vue.js中事件修饰符的使用方法，包括如何阻止事件冒泡、阻止默认行为及使用键修饰符等。通过具体示例展示了@click.stop、@click.prevent和@keyup.enter等修饰符的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生js中，阻止事件冒泡，获取点击对象, e.stopPropagation();
vue阻止事件冒泡@click.stop=“show”

<body>
    <div id="myApp" @click="show2()">
        <div @click="show1()">
            <button @click.stop="show">vue点我</button>
        </div>
    </div>
</body>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

关注博主即可阅读全文