v-if

v-if 디렉티브는 조건부로 블록을 렌더링하는 데 사용한다. 블록은 디렉티브 표현식이 참인 경우에만 렌더링됩니다.

<template>
 <h1 v-if=true>우리집 강아지</h1>
</template>

v-else

v-else로 v-if에 해당되지 않는 else블록을 나타낼 수 있다.

<template>
 <button @click="dog = !dog">전환</button>
 <h1 v-if="dog">우리집 강아지</h1>
 <h1 v-else>복슬강아지</h1>
</template>

<script setup>
const dog = ref(true)
</script>

dog를 true로 만든 뒤 버튼을 누를 때 마다 현재 dog의 참거짓 값을 반대로 돌렸다.
그리고 해당 dog의 현재 값에 따라 아래에있는 h1태그 두개 중 한개가 나오게 된다.

v-else-if

이름 그대로 else if 블록을 나타낸다.

<template>
 <div v-if="type === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    A/B/C 아님
  </div>
</template>

<script setup>
const type = ref('B')
</script>

v-if는 template 태그에서도 사용이 가능하다.

v-show

<h1 v-show="ok">안녕!</h1>

v-show 또한 조건부로 엘리멘트를 표시하는 방법 중 하나입니다.

v-if vs v-show

v-if의 경우 조건에 따라 엘리멘트가 실제로 생성 및 제거가 된다.

하지만 v-show는 단순히 css의 display 속성만 변경된다.

따라서 v-if는 변경 시 오버헤드가 크고, v-show는 초기 로딩 시 오버헤드가 크다.