个人学习笔记,我会一直完善,如果有错请评论区指教。
v-show实现元素隐藏
template
<template>
<div class="about">
<h1>这是v-show案例</h1>
<p>v-show是条件展示,如果v-show=false,则对应该元素被隐藏,仍然保留在dom中</p>
<h1 v-show= this.showA>A</h1>
<h1 v-show= this.showB>B</h1>
<el-button @click="changeA">点击切换A的显示</el-button>
<el-button @click="changeB">点击切换B的显示</el-button>
</div>
</template>
script
<script>
export default {
data(){
return {
showA: false,
showB: true
}
},
methods:{
changeA(){
if (this.showA == false) {
this.showA = true
}else if (this.showA == true) {
this.showA = false
}
},
changeB(){
if (this.showB == false) {
this.showB = true
}else if (this.showB == true) {
this.showB = false
}
}
}
}
</script>