Vue2+ElementUI学习笔记——v-show

个人学习笔记，我会一直完善，如果有错请评论区指教。

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>