vue.js - 조건부 렌더링
조건부 렌더링
- 웹사이트마다 상황에 따라 다른 화면 또는 컨텐츠를 제공할 경우 유용하게 사용가능합니다.
- vue에서는 이러한 경우에 v-show와 v-if 디렉티브를 제공합니다.
v-show
- css의 display속성을 이용한 화면 표시 여부를 결정합니다.
- jQuery의 show(), hide()에 대응되는 디렉티브입니다.
<div v-show="속성값">내용</div>
- 속성값에는 vue 인스턴스 변수 또는 메소드를 이용해서 true, false의 값을 사용합니다.
- 항상 렌더링되고 DOM에 남아있으며, diplay:none을 이용해서 화면에 출력하지 않습니다.
v-if / v-else / v-else-if (2.1.0이상부터)
- v-show 디렉티브와 다르게 속성값이 ture인 경우에만 DOM요소를 랜더링합니다.
- v-else와 v-else-if 디렉티브는 단독으로 사용할 수 없으며, v-if 디렉티브 뒤에 위치해야 합니다.
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
- v-if는 디렉티브이기 때문에 하나의 DOM요소에만 추가해야합니다.
- 따라서, 여러 DOM요소에 적용하기 위해서는 여러번 사용하거나, < template > 엘리먼트를 사용해야합니다.
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-if와 v-show
- v-if는 속성값이 거짓인 경우 아무일도 하지 않습니다. 그래서 토글 비용이 높습니다.
- v-show는 css를 기반으로 초기 조건과 관계없이 엘리먼트가 항상 렌더링됩니다. 따라서 초기 렌더링 비용이 높습니다.
- 공식 사이트에서는 이러한 성질 때문에 중간 중간 자주 바뀌는 경우 v-show를 런타임시 조건이 바뀌지 않으면 v-if를 권장하고 있습니다.
ps. 찾아보고 공부하면서 정리하는 내용이라 틀릴 수 있음을 알려드립니다.
참고