Vue.js : 조건부 렌더링 사용하기

프로그래밍을 하면 반복문, 조건문을 자주 사용하게 됩니다.
Vue 에서도 조건문에 해당하는 문법을 지원하고 있습니다.

다음과 같이 v-if, v-else-if, v-else를 활용하여 조건부 렌더링을 수행할 수 있습니다.

<div v-if="type===A"> A </div>
<div v-else-if="type===B"> B </div>
<div v-else="type===C"> C </div>

그리고 v-show를 활용하면, 항상 렌더링되어 DOM안에 정의되어 있도록 할 수 있습니다.
다만, 조건에 따라 화면에 보여줄지를 결정할 수 있는 것이지요.

<div v-show="ok"> Hello World ! </div>

따라서 조건부 행위가 자주 일어난다면 v-show를 사용하고,
그렇지 않다면 v-if를 활용하면 됩니다.

v-show는 초기 렌더링 비용이 높고,
v-if는 조건부 행위 따른 렌더링 비용이 높기 때문입니다.