본문 바로가기
Vue.js

Vue.js] 6. 조건부 렌더링

by Fastlane 2024. 12. 27.
728x90
반응형

v-if

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

 

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

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

 

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

 

<template v-if="ok">
  <h1>제목</h1>
  <p>단락 1</p>
  <p>단락 2</p>
</template>

 

v-show

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

v-if와의 차이점은 v-show가 있는 엘리먼트는 항상 렌더링되고 DOM에 남아있다. v-show는 엘리먼트의 display CSS 속성만 전환한다. 

v-show는 <template>를 지원하지 않으면, v-else와 상호작용하지 않는다. 

 

v-if vs v-show

v-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높습니다. 따라서 자주 전환해야 하는 경우 v-show를, 실행 중에 조건이 변경되지 않는 경우 v-if를 사용하는 것이 좋다. 

 

엘리먼트에 v-if와 v-for를 함께 사용하는 것은 권장되지 않는다. 함께 사용하면 v-if가 먼저 평가된다. 

 

 

 

 

728x90
반응형

'Vue.js' 카테고리의 다른 글

Vue.js] 8. 이벤트 핸들링  (0) 2024.12.27
Vue.js] 7. 리스트 렌더링  (0) 2024.12.27
Vue.js] 5. 클래스와 스타일 바인딩  (0) 2024.12.24
Vue.js] 4. 계산된 속성  (0) 2024.12.24
Vue.js] 3. 반응형 기초  (0) 2024.12.24

댓글