[vue3 공식문서 번역]Essentials.6.Conditional Rendering

v-if

v-if 지시어는 블록을 선택적으로 렌더링할 때 사용된다. 블록은 지시어의 표현이 true 값을 리턴할때만 렌더링 된다.

<h1 v-if="awesome">Vue is awesome!</h1>

 

v-else

v-if를 위한 "else block"을 가리키기 위해 v-else 지시어를 사용할 수 있다.

<button @click="awesome = !awesome">Toggle</button>

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no!</h1>

v-else 엘리먼트는 v-if 또는 v-else-if 엘리먼트 바로 다음에 쓰여야만 한다 - 그렇지 않으면, 인식되지 않는다.

 

v-else-if

 v-else-if는 이름에서 알수 있듯, v-if를 위한 "else if block" 으로서 제공된다. 여러번 체이닝 될 수 있다.

<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 엘리먼트 바로 뒤따라서 쓰여야만 한다.

 

v-if on <template>

v-if는 지시어라서, 하나의 엘리먼트에만 쓸 수 있다. 하지만 하나 이상의 엘리먼트를 토글하길 원한다면 어떨까? 이 경우, 보이지않는 포장지로서 template 엘리먼트에 v-if를 사용할 수 있다. 마지막 렌더링 결과는 template 엘리먼트를 포함하지 않는다.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-else와 v-else-if 또한 <template>에 사용할 수 있다.

 

v-show

엘리먼트를 선태적으로 보여주기위한 다른 옵션은 v-show 지시어다. 사용법은 대체로 같다.

<h1 v-show="ok">Hello!</h1>

차이점은 v-show 엘리먼트는 DOM에 남아있고, 항상 렌더링 된다. v-show는 오직 엘리먼트의 display CSS 프로퍼티에 의해 토글된다.

 

v-show는 <template엘리먼트를 지원하지 않으며, v-else도 동작하지 않는다.

 

v-if vs v-show

v-if는 "진짜" 선택적인 렌더링이다. 왜냐면, 선택적인 블록안에 있는 자식 컴포넌트와 이벤트리스너가 토글중에 다시 만들어지거나 완전히 삭제된다.

 

v-if는 또한 lazy로 동작한다: 만약 조건이 초기 렌더링시에 false면, 아무것도 하지 않는다 - 처음 조건이 true가 될 때 까지 조건블록은 렌더힝 하지 않는다.

 

반면에, v-show는 좀 더 심플하다 - CSS에 기초한 토글링과 함께, 엘리먼트가 초기 조건에 관계없이 항상 렌더링 된다. 

 

일반적으로 말하자면, v-if는 토글에 대한 비용이 비싸고, v-show는 초기 렌더링 비용이 비싸다. 그래서 만약 매우 자주 토글해야한다면  v-show를 추천하고, 조건이 런타임에 잘 변경되지 않으면 v-if를 추천한다.

 

v-if와 v-for

주의 우선실행권에대한 충돌로 인해 같은 엘리먼트에 v-if와 v-for를 사용한는걸 추천하지 않는다. 상세내용은 style guide를 참고하라

v-if와 v-for를 같은 엘리먼트에 사용할 때, v-if는 먼저 평가된다. 자세한 내용은 list rendering guide를 보라.