v-if
v-if 디렉티브는 조건부로 블록을 렌더링하는 데 사용됨.
블록은 디렉티브 표현식이 true값을 반환하는 경우에만 렌더링됨.
<h1 v-if="awesome">Vue는 정말 멋지죠!</h1>v-else
v-else 디렉티브를 사용하여 v-if에 대한 "else 블록"을 나타낼 수 있음.
<button @click="awesome = !awespme">전환</button>
<h1 v-if="awesome">Vue는 정말 멋지죠!</h1>
<h1 v-else>아닌가요? </h1>v-else-if
v-else-if도 이름에서 알 수 있듯이 v-if에 대한 "else if 블록" 역할을 함.
여러번 연결될 수 있음.
<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
v-if 는 디렉티브이므로 단일 엘리먼트에 연결해야 함.
하지만 둘 이상의 엘리먼트를 전환하려면 보이지 않는 래퍼 역할을 하는 <template> 엘리먼트에 v-if를 사용할 수 있음.
최종 렌더링된 결과에는 <template> 엘리먼트가 포함되지 않음.
<template v-if="ok">
<h1>제목</h1>
<p>단락 1</p>
<p>단락 2</p>
</template>v-else 및 v-else-if 는 <template>에서도 사용할 수 있음.
v-show
엘리먼트를 조건부로 표시하는 다른 옵션은 v-show 디렉티브가 있음. 사용법은 대체로 동일함.
<h1 v-show="ok">안녕!</h1>차이점은 v-show가 있는 엘리먼트는 항상 렌더링되고 DOM에 남아 있음. v-show는 엘리먼트의 display CSS 속성만 전환함.
v-show는 <template> 엘리먼트를 지원하지 않으며 v-else와 상호작용 하지 않음.
v-if vs v-show
v-if는 "실제" 조건부 렌더링임.
조건부 블록이 전환될 경우, 블록 내 이벤트 리스너와 자식 컴포넌트가 제대로 제거되거나 재생성됨.
또한 v-if는 게으르므로(lazy), 초기 조건이 false면 아무 작업도 수행하지 않음. 조건부 블록은 조건이 true가 될 때까지 렌더링 되지 않음.
이에 비해 v-show는 훨씬 간단함. 엘리먼트는 CSS 기반으로 전환 되므로, 초기 조건과 관계없이 항상 렌더링 됨.
일반적으로 v-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높음. 따라서 매우 자주 전환해야 하는 경우 v-show를, 실행 중에 조건이 변경되지 않는 경우 v-if를 사용하는 것이 좋음.
v-if와v-show를 함꼐 사용하는 것은 권장되지 않음.
