提出问题
在 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>