// <template v-if="isShow">
// 개발자 모드에서 보면 위와 같이 template 으로 감싸는 경우에 보이지 않는다.
// 그룹화 해서 특정한 무언가를 한번에 처리하고 싶을 때 사용할 수 있다. 하지만 최상위 루트에서
// 감싸게 되면 적용이 되지 않는다.
<template>
  <button @click="handler">
    Click me!
  </button>
  <template v-if="isShow">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>
</template>

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

v-show 디렉티브
구조적으로 항상 렌더링 되어 DOM 에 남아있다. 그런데 안 보이는 이유는
display: none 상태이기 때문이다. v-show 는 단순히 CSS display 속성을 전환한다.
v-if 와는 다르다. v-if는 조건부 렌더링이고, v-show 는 그려져 있는 것이다.

v-if 는 전환 비용이 높고, v-show 는 초기 렌더링 비용이 높다.