[개념잡기] v-if 와 v-show 의 차이

v-if 와 v-show의 차이

Vue.js 에서 조건부 렌더링을 할 때 사용하는 디렉티브는 v-if 와 v-show 가 있다.

이번 포스트에서는 둘의 차이점에 대행 이야기 해보려고 한다. 본 포스트는 vue.js 공식홈페이지를 참고하여 작성하였다.

 

v-if

ok 의 값이 참이면 Yes 가 렌더링 되고 거짓이면 No 가 렌더링 된다. v-else 를 통해서 "else 블록"을 나타낼수도 있다. v-else 는 항상 v-if 난 v-else-if 뒤에 와야한다.

2.1.0 부터 v-else-if가 추가됨

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

 

template 을 이용해 조건부 그룹을 만들 수 도있다.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

 

v-show

v-if 와 거의 동작이 비슷하다. ok 의 값이 참이면 화면에 표시된다.

<h1 v-show="ok">Yes</h1>

 

이 둘의 차이점

이 둘의 가장 큰 차이점은 우선 v-if는 조건에 따라 컴포넌트가 실제로 제거되고 생성된다.

반면에 v-show 는 단순히 css 의 display 속성만 변경된다.

개발자 도구 로 보면 둘의 차이를 한눈에 볼수 있다.