v-if은 조건부로 블록을 렌더링하는 데 사용된다.
블록은 지시문 표현식이 진실 값을 반환하는 경우에만 렌더링된다.
<h1 v-if="awesome">Vue is awesome!</h1>v-show
요소를 조건부로 표시하는 또 다른 옵션 v-show
<h1 v-show="ok">Hello!</h1>v-if 와 v-show
v-show v-if 차이점
차이점은 v-show 요소가 항상 렌더링되고 DOM에 남아 있다는 것이다. v-show는 요소의 CSS display 속성만을 토글한다.
v-show 는 v-else요소를 지원하지 않으며 와 함께 작동하지도 않는다.
v-if조건부 블록 내부의 이벤트 리스너와 자식 구성 요소가 토글 중에 적절하게 파괴되고 다시 생성되도록 하기 때문에 "실제" 조건부 렌더링이다.
-
v-ifis also lazy : 초기 렌더링에서 조건이 거짓이면 아무 작업도 수행하지 않는다. 조건 블록은 조건이 처음으로 참이 될 때까지 렌더링되지 않는다. -
이에 비해
v-show은 훨씬 간단하다. CSS 기반 토글을 사용하여 초기 조건에 관계없이 요소가 항상 렌더링된다. -
일반적으로
v-if은 토글 비용이 높고,v-show는 초기 렌더링 비용이 더 높다. 따라서 무언가를 매우 자주 토글해야 하는 경우v-show를 선호하고, 런타임 시 조건이 변경되지 않을 경우v-if를 선호한다.
뚜벅뚜벅