上接：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>