[ Reference ]
https://vuejs.org/guide/essentials/conditional.html
Conditional Rendering | Vue.js
vuejs.org
1. v-if
directive 중의 하나인 ** v-if ** 는 블록에서 조건부 렌더링하고 싶을 때 사용한다. 해당 블록은 디렉티브의 표현식이 true 값을 반환될 때만 렌더링된다.
<h1 v-if="awesome">Vue is awesome!</h1>
2. v-else
** v-else ** 는 ** v-if ** 의 else 블록이다. ** v-else ** 에리먼트는 반드시 ** v-if ** 나 ** v-else-if ** element 뒤에 따라가야 하며 그렇지 않은 경우 인식되지 못한다.
<button @click="awesome = !awesome">Toggle</button>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
3. v-else-if
** v-else-if ** 는 ** v-if ** 의 else-if 구문이다.
<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>
Not A/B/C
</div>
** v-else ** 와 마찬가지로 ** v-else-if ** 는 반드시 ** v-if ** 나 다른 ** v-else-if ** 뒤에 따라 나와야 한다.
4. v-if on <template>
** v-if ** 가 directive 이기에 반드시 한 개의 element 에 붙어 있어야 한다. 하지만, 토글과 같이 두 개 이상의 요소가 렌더링 되기 위해서는 어떻게 해야하는가? 방법은 ** v-if ** 를 ** <template> ** 에다 부여하는 방법이다. <template> 은 보이지 않는 wrapper 기능을 수행한다. 최종 렌더링에서는 <template> 이 렌더링이 되지 않지만 코드 상에서 개념적으로 가상으로 태그들을 묶을 수 있는 기능을 한다. (* React 의 관점에서 생각하면 Fragment, <> </> 와 유사한 개념인 거 같다. 물론, 선언적 렌더링과 JSX 문법 사이의 차이가 존재하지만)
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
물론, ** v-else ** , ** v-else-if ** 도 <tempalte> 안에서 사용할 수있다.
5. v-show
조건부로 element 를 보여준다는 의미에서 ** v-show ** 라는 디렉티브가 존재한다. 사용법은 동일하다.
<h1 v-show="ok">Hello!</h1>
** v-show ** 와 ** v-if ** 사이에서 차이점이 존재한다면 ** v-show ** 는 DOM tree 에 항상 존재한다는 점이다. 단지, CSS 속성의 개념으로 display 가 none 이 될 뿐이다. 이 점이 ** v-if ** 와 다르다. (* v-if 는 조건에 따라 DOM tree 에 append 될지 remove 될지 결정되기 때문)
6. v-if 와 v-show
진정한 의미에서 조건부 렌더링은 실제로 DOM tree 에서 제거되고 다시 생성하는 ** v-if ** 다. 단, ** v-show ** 는 ** v-if ** 보다 간단하고 빠르게 동작한다. ** v-if ** 는 토글 비용이 높고 ** v-show ** 는 초기 렌더링 비용이 높다는 특징이 있어서 만약 항목을 자주 전환할 경우에는 ** v-show ** 가 낫고, 런타임 환경에서 조건이 변경되지 않는 경우에는 ** v-if ** 를 사용하는 것이 좋다.