提出问题
在 a 标签添加 点击事件 后，点击时会 先触发事件，然后会 刷新页面
如下图案例：
在输入框中输入内容（这里演示，可随意输入）
在 a 标签添加 点击事件 ，弹出提示框，关闭提示框后，会 刷新页面，由于 刷新页面，导致 输入框的内容消失
<div id="app">
<input value=""><br>
<a href="" v-on:click="show" >弹出对话框</a>
</div>
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script type="importmap">
{
"imports": {
"vue": "./js/vue.esm-browser@3.5.13.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
createApp({
data: function(){
return{
msg: 'Hello Vue!',
panel:'student'
}
},
methods:{ // 在 methods 对象中定义方法
show:function(event){//第一个参数是事件对象
alert("hello")
console.log("hello")
}
}
}).mount('#app')
</script>
分析
在 a 标签添加 点击事件 后，点击时会 先触发事件，然后会 刷新页面，那么要在vue中，阻止 默认的刷新事件
解决
通过 .prevent 阻止默认事件
<div id="app">
<input value=""><br>
<a href="" v-on:click="show" >弹出对话框</a><br>
<a href="" v-on:click.prevent="show" >弹出对话框（不刷新）</a>
</div>
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script type="importmap">
{
"imports": {
"vue": "./js/vue.esm-browser@3.5.13.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
createApp({
data: function(){
return{
msg: 'Hello Vue!',
panel:'student'
}
},
methods:{ // 在 methods 对象中定义方法
show:function(event){//第一个参数是事件对象
alert("hello")
console.log("hello")
}
}
}).mount('#app')
</script>