vue教程-事件修饰符-阻止默认事件 .prevent 作者：马育民 • 2022-01-16 12:45 • 阅读：10080 上接：[vue教程-事件修饰符介绍](https://www.malaoshi.top/show_1IX2bPz7jE94.html "vue教程-事件修饰符介绍") # 提出问题 在 `a` 标签添加 **点击事件** 后，点击时会 **先触发事件**，然后会 **刷新页面** **实际上：** 我们只想 **触发点击事件**，**不想** 刷新页面 ``` <div id="app"> <a href="" v-on:click="show" >弹出对话框</a> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script> var vm = new Vue({ el: '#app', methods:{ // 在 methods 对象中定义方法 show:function(event){//第一个参数是事件对象 alert("hello") console.log("hello") } } }) </script> ``` ### 解决 通过 `.prevent` 阻止默认事件 ``` <div id="app"> <a href="" v-on:click="show" >弹出对话框1</a><br> <a href="" v-on:click.prevent="show" >弹出对话框2</a> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> <script> var vm = new Vue({ el: '#app', methods:{ // 在 methods 对象中定义方法 show:function(event){//第一个参数是事件对象 alert("hello") console.log("hello") } } }) </script> ``` 原文出处：http://malaoshi.top/show_1IX2bQ9zHm6t.html