[Vue.js] 조건부 렌더링

1. v-if

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

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

<!-- 여러 tag를 묶는 법 -->
<template v-if="ok">
  <h1>제목</h1>
  <p>단락 1</p>
  <p>단락 2</p>
</template>

 

---

2. v-show

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

v-if와 차이점은 v-show가 있는 엘리먼트는 항상 렌더링 되고 DOM에 남아 있다는 것입니다.

 

display CSS 속성만 전환한다.

 

v-show는 <template> 엘리먼트를 지원하지 않는다.

 

또한 v-else와 상호작용하지 않는다.

 

---

3. v-if? v-show?

 

	v-if	v-show
렌더링	참일 때만 렌더링	항상
전환 비용	크다	적다
초기 렌더링 비용	적다	크다
용도	런타임 시 조건이 변경될 가능성이 낮음	자주 전환하는 경우

 

---

4. v-if와 v-for

 

[Vue.js] 리스트 렌더링

 

---