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