Vue에서 조건부 렌더링할 때 v-if와 v-show를 사용한다.
v-if
v-if는 조건(true, false)에 따라 화면 렌더링할 때 사용한다.
v-if 기본 문법
<div v-if="true">보입니다.</div>
<div v-if="false">안보입니다.</div>
v-if 활용 예시
v-else, v-else-if를 사용해서 다중 조건절을 사용할 수 있다.
See the Pen v-show by Kyunjihwan (@dogjihwan) on CodePen.
v-else, v-else-if 주의 사항
if 조건절처럼 v-else, v-else-if는 v-if 바로 뒤에 와야 사용이 가능하다.
v-show
v-show는 v-if와 같이 조건에 따라 화면 표시할 때 사용한다.
차이점으로 v-show는 항상 렌더링 되고 DOM에 유지된다. (css display:block/none으로 전환)
<div v-show="true">안숨김</div>
<div v-show="false">숨김</div>
v-show 활용 예시
See the Pen Hello, Vue 3 by Kyunjihwan (@dogjihwan) on CodePen.
v-if와 v-show 구분
v-if는 컴포넌트가 토글되는 상황에서 DOM이 제거되고 다시 만들어진다. 초기 렌더링 시 거짓인 경우 만들어지지 않는다.
v-show는 초기 조건과 관계 없이 렌더링되고, CSS 속성만 변경된다. 초기 렌더링이 오래걸리더라도 지속적으로 토글되는 경우 v-show를 사용하는 것이 더욱 효과적이다.