[Vue]v-if vs v-show

Vue.js 공식 문서 (v-if , v-show)

조건부 렌더링 — Vue.js

 

v-if

v-if 디렉티브는 조건에 따라 블록을 렌더링 하기 위해 사용된다. v-if 의 경우 디렉티브의 표현식이 true 값을 반환할 때만 렌더링 되어 DOM에 추가되게 된다.

// v-if 값이 true일 경우에만 렌더링 됨
<template v-if="blogName === 'leffe'">
    <p>블로그 이름은 leffe 입니다</p>
</template>
<template v-else>
    <p>블로그 이름은 leffe가 아닙니다</p>
</template>

 

v-show

반면에 v-show의 경우 엘리먼트는 항상 렌더링되며 DOM에 남아있다. v-show 는 단순히 display의 CSS 속성을 통해 표시를 제어한다.

// v-show 엘리먼트는 항상 렌더링 됨
// blog 이름이 leffe가 아닐 경우 display:none;
<template v-show="blogName === 'leffe'">
    <p>블로그 이름은 leffe 입니다</p>
</template>