解决在html中给button按钮添加了@click事件控制v-if或者v-show无效的问题

在项目开发中，要实现点击一个按钮控制某个div显示或者隐藏的情景。
主要思路为结合vue，为div添加v-if或者v-show，然后为按钮添加点击事件，控制v-if或者v-show的值。
主要代码如下：

//HTML中代码
<div id="app">
    <div v-if="isShow">
        要显示和隐藏的内容
    </div>
    <button @click="showClick">{{text}}</button>
 </div>

 //vue中代码
 new Vue({
    el: '#app',
    data: function() {
        return {
            text: '点击显示',
            isShow: false,
        }
    },
    methods: {
        showClick() {
            this.isShow = !this.isShow
            if (this.isShow) {
                this.text = '点击隐藏'
            } else {
                this.text = '点击显示'
            }
        }
    }
})

但是在整个项目中这样写并没有实现理想中的效果。
出现的问题为不仅没有切换显示隐藏，还刷新的整个页面
也不知道是因为我其他地方的代码哪里做了限制。
如果单独写这些是可以实现切换显示隐藏的。
经过一番努力后，终于找到了问题出在哪里。
是因为我的 button 按钮没有给 typt 类型，只要给 button 加上 type=“button” 即可

<button type="button" @click="showClick">{{text}}</button>