[Vue.js] 조건부 렌더링

 

---

 

 

1. v-if / v-else-if / v-else

<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>

type 값에 따라 조건적으로 어떤 div가 렌더링 될지 지정할 수 있다.

template 엘리먼트에 사용 가능하다.

v-for 와 같이 사용하는 것을 피해야 한다.(참고: https://ko.vuejs.org/style-guide/rules-essential#avoid-v-if-with-v-for)

 

2. v-show

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

display css 속성만 전환해서 엘리먼트를 조건부로 나타낼 수 있다. => 항상 렌더링되고 DOM에 남는다.

template 엘리먼트에는 사용할 수 없다.

 

 

3. v-if vs v-show

v-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높다.

=> 조건이 자주 변경되는 경우에는 v-show를, 조건이 고정된 경우에는 v-if를 사용하는 것이 좋다.

 

 

 

참고: https://ko.vuejs.org/guide/essentials/conditional.html#conditional-rendering