조건부 렌더링 | Vue.js

v-if

→ v-if 디렉티브는 조건부로 블록을 렌더링하는 데 사용된다.

• 블록은 디렉티브 표현식이 truthy 값을 반환하는 경우에만 렌더링된다.

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

v-else

→ v-else 디렉티브를 사용해서 v-if 에 대한 “else 블록”을 나타낼 수 있다.

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

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

• v-else 엘리먼트는 v-if 또는 v-else-if 엘리먼트 바로 다음에 와야 인식된다.

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>
  A/B/C 아님
</div>

• v-else-if 엘리먼트는 v-if 또는 v-else-if 엘리먼트 바로 다음에 와야 한다.