[Vue 빠른시작] 조건부 렌더링(Conditional Rendering) 예제 추가

1. v-if

v-if 디렉티브는 조건부로 블록을 렌더링하는 데 사용된다. 블록은 디렉티브 표현식이 truthy 값을 반환하는 경우에만 렌더링 된다.

<script>
export default {
  data() {
  return {
    awesome: 1
  }
}
}
</script>

<template>
  <h1 v-if="awesome">Vue는 정말 멋지죠!</h1>
</template>

2. v-else

'v-else' 디렉티브를 사용하여 v-if에 대한 "else 블록"을 나타낼 수 있다. 'v-else' 엘리먼트는 v-if 또는 'v-else-if' 엘리먼트 바로 다음에 와야 한다. 그렇지 않으면 인식되지 않는다.

<script>
export default {
  data() {
  return {
    awesome: 1
  }
}
}
</script>

<template>
  <button @click="awesome = !awesome">전환</button>

  <h1 v-if="awesome">Vue는 정말 멋지죠!</h1>
  <h1 v-else>아닌가요?</h1>
</template>

3. v-else-if

<script>
export default {
  data() {
  return {
    type: 'C'
  }
}
}
</script>

<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>No</div>
</template>

4. <'template>에서 v-if

v-if는 디렉티브이므로 단일 엘리먼트에 연결해야 한다. 따라서 둘 이상의 엘리먼트를 전환하려면 보이지 않는 래퍼 역할을 하는 <template> 엘리먼트에 v-if를 사용할 수 있다. 최종 렌더링된 결과에는 <template> 엘리먼트가 포함되지 않는다.

<script>
export default {
  data() {
  return {
    ok: 1
  }
}
}
</script>

<template>
  <template v-if="ok">
    <h1>제목</h1>
    <p>단락1</p>
    <p>단락2</p>
  </template>
</template>

실행화면

'v-else' 및 'v-else-if'는 <'template>에서도 사용할 수 있다.

5. v-show

엘리먼트를 조건부로 표시하는 다른 옵션은 v-show 디렉티브이다. 사용법은 대체로 동일하다. 차이점은 v-show가 있는 엘리먼트는 항상 렌더링되고 DOM에 남아 있다는 것이다. v-show는 엘리먼트의 display CSS 속성만 전환한다.
v-show는 <template>엘리먼트를 지원하지 않으며 v-else와 상호작용하지 않는다.

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

6. v-if vs v-show

v-if는 "실제" 조건부 렌더링이다. 조건부 블록이 전환될 경우, 블록 내 이벤트 리스너와 자식 컴포넌트가 제대로 제거되거나 재생성되기 때문이다.

또한 v-if는 게으르므로(lazy), 초기 조건이 false면 아무 작업도 수행하지 않는다. 조건부 블록은 조건이 true가 될 때까지 렌더링 되지 않는다.

이에 비해 v-show는 훨씬 간단하다. 엘리먼트는 CSS 기반으로 전환 되므로, 초기 조건과 관계없이 항상 렌더링 된다.

일반적으로 v-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높다. 따라서 매우 자주 전환해야 하는 경우 v-show를, 실행 중에 조건이 변경되지 않는 경우 v-if를 사용하는 것이 좋다.

7. v-if with v-for

note! v-if와 v-for를 함께 사용하는 것은 권장되지 않는다

엘리먼트에 v-if와 v-for를 함께 사용하면 v-if가 먼저 평가된다. (다음 장 리스트 렌더링 참고 할 것)

---

참고

Vue Docs