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

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

v-if实现数据显示和销毁

template

<template>
  <div class="about">
    <h1>这是v-if案例</h1>
    <p>v-if是条件渲染，如果v-if=false，则对应该元素被删除，不保留在dom中</p>
    <h1 v-if= showA>A</h1>
    <h1 v-if= 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>