9_조건부 랜더링(v-if, v-show)

1. v-if

: 조건부로 불록을 랜드링 할 때 사용함

<h1 v-if="visible">Hello Vue3!</h1>

 

2.v-else

: v-if가 거짓일 때 랜더링.

<h1 v-if="visible">Hello Vue3!</h1>
<h1 v-else>Good bye!</h1>

 

3.v-else-if

: 말 그래로 else-if 블록으로 여러 조건을 연결 가능.

<h1 v-if="type === 'A'">
  A
</h1>
<h1 v-else-if="type === 'B'">
  B
</h1>
<h1 v-else-if="type === 'C'">
  C
</h1>
<h1 v-else>
  Not A/B/C
</h1>

 

4.여러개 html요소를 v-if로 연결하고 싶으면 <template> 사용할 수 있음

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

 

 

5. v-show 

<h1 v-show="show">Title</h1>
	<button @click="show = !show">toggle show</button>

 

 

6.v-if vs v-show

-v-if는 조건에 따라 랜더링을 하거나 안해줌 : 전환비용이 큼

-> 런타임 시 조건이 변경되지 않는다면 v-if 가 좋음

-v-show는 처음에 랜더링을 무조건 해주다가 조건에 따라 display속성으로 보여주거나 안 보이도록 처리함 : 초기 랜더링 비용이큼

->자주 변환해야할 때는 v-show

 

7. v-if 와 v-for

: 이 둘 중에서 v-if가 더 높은 우선순위를 가지므로 함께쓰는 것은 권장하지 않음!