[Vue.js] 08. 조건부 렌더링

v-if

조건에 따라 블록을 렌더링할 때 사용.

디렉티브의 표현식이 true 값을 반환할 때만 렌더링된다.

<h1 v-if="awesome">Vue is awesome!</h1>

v-else와 함께 'else 블록'을 추가하는 것도 가능하며

v-else-if 디렉티브 또한 가능하다.

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else-if="awesome2">Vue is awesome2!</h1>
<h1 v-else>Oh no 😢</h1>

<template>에 v-if를 갖는 조건부 그룹 만들기

둘 이상의 엘리먼트를 전환하려면 <template> 엘리먼트를 이용하면 좋다.
<template> 엘리먼트는 눈에 보이지 않게 내부 엘리먼트를 감싸는 역할을 하며, 최종 렌더링 결과에 포함되지 않는다.

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

만약 div로 감싸게 되면 최종 렌더링 결과에 div 요소가 렌더링 된다.

div를 template 태그로 바꿔주게 되면 최종 렌더링 결과에는 template가 포함되지 않는다.

 

v-show

v-if와 아주 유사하게 사용 가능하지만, v-show는 항상 렌더링 되어 DOM에 남아있다는 점이 다르다.

v-show는 단순히 엘리먼트의 display 속성만을 전환한다.

<template> 엘리먼트를 지원하지 않으며, v-else와 함께 사용할 수도 없다.

 

v-if 와 v-show

v-if는 전환 비용이 높은 대신 초기에 렌더링 비용이 적다.

v-show는 초기 렌더링 비용이 많이 들지만 전환 비용이 적다.

따라서 비용의 효율성을 따져서 둘을 적절히 배치해야 한다.

 

v-if와 v-for

v-if와 v-for는 함께 사용하는 것을 권장하지 않는다.

함께 사용하게 되면 v-if가 더 높은 우선순위를 갖게 된다.

자세한 내용은 다음을 참조한다.

리스트 렌더링 | Vue.js (vuejs.org)

리스트 렌더링 | Vue.js