v-if와 v-show를 상태와 전환 비용에 맞게 선택합니다.
v-if는 조건이 거짓이면 요소와 자식 컴포넌트를 제거하고 v-show는 display만 바꿉니다. 드물게 전환되는 큰 영역은 v-if, 자주 토글되는 단순 영역은 v-show를 고려합니다.
로딩, 오류, 빈 결과, 성공을 명시적인 상태로 나눕니다.
v-else는 바로 앞의 v-if 또는 v-else-if와 인접해야 합니다.
v-if와 v-for를 같은 요소에 함께 써 우선순위를 의존하지 말고 필터를 computed로 분리하세요.
로컬 프로젝트에서 확인해보세요error 상태를 추가해 실패 화면을 표시하세요.
<script setup>
import { ref } from "vue";
const loading = ref(true);
setTimeout(() => (loading.value = false), 500);
</script>
<template>
<main>
<p v-if="loading">불러오는 중...</p>
<section v-else>
<h1>Vue 강좌</h1>
<p>데이터 준비 완료</p>
</section>
</main>
</template>