实现效果:点击按钮出现盒子提示‘盒子出现’,再次点击盒子消失提示‘盒子消失’。
按钮的样式:
<el-button type="text" @click="btnShow">点击这个按钮</el-button>
<div v-show="open">这是盒子内容</div>
data中的默认值:
open:false
点击方法:
btnShow() {
this.open = !this.open
},
这样就实现了点击按钮展示盒子内容,再次点击按钮盒子内容隐藏。
接下来实现点击按钮展示盒子内容并提示‘盒子出现’,再次点击按钮盒子内容隐藏并提示‘盒子消失’。
btnShow() {
this.open = !this.open
if(this.open){
this.$message.success('盒子出现')
}else{
this.$message.success('盒子消失')
}
},