<template>
  <div id="app">
    <button
    @click="handler">
    click me!
  </button>
  <h1
    v-if="isShow">
    Hello?!
    v-if는 태그 자체가 사라지고 나타남
  </h1>
  <h1 v-else-if="count > 3">
    Count > 3
  </h1>
  <h1 v-else>
    Good~
  </h1>
  <div v-if="isShow">
    <h1>div로 v-if 쓸경우</h1>
    <p>p1</p>
    <p>p2</p>
  </div>
  <template v-if="isShow">
    <h1>template로 v-if 쓸경우</h1>
    <p>p1</p>
    <p>p2</p>
  </template>
  <h1 v-show="isShow">v-show 는 display 속성만 건듬</h1>
  </div>
</template>

<script>
export default {
  data(){
    return{
      isShow: true,
      count: 0
    }
  },
  methods:{
    handler(){
      this.isShow = !this.isShow
      this.count += 1
    }
  }
}
</script>