조건부 렌더링(v-if)

v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용하는 것으로, 디렉티브의 표현식이 true일 경우에만 블록이 렌더링 되는 것이다. v-else와 함께 else 블록을 사용할 수 있다.

<div v-if="test">
  v-if Test
</div>
<div v-else>
  else Test
</div>

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

v-if는 디렉티브이기 때문에 하나의 element(Tag)에 추가해야 하지만, 하나 이상의 element(Tag)를 동시에 transition(스타일)을 적용하고자 한다면?

• 보이지 않는 wapper 역할을 하는 <template> element에 v-if를 사용할 수 있다.
• 최종 렌더링 결과에는 <template> element가 보여지지 않는다.

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

v-else

v-else디렉티브를 사용해서 v-if에 대한 else 블록을 나타낼 수 있다.

v-else디렉티브는 v-if 또는 v-else-if element 바로 뒤에 있어야 하는데, 그렇지 않으면 인식하지 못한다.

v-else-if

v-else-if는 v-if에 대한 else-if 블록 역할을 한다.

여러 개 사용이 가능하다.

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

key를 이용한 재사용 가능한 엘리먼트 제어

vue는 가능한 한 효율적으로 element를 렌더링하고, 처음부터 렌더링하지 않고 다시 사용한다.

vue를 빠르게 만드는데 도움이 되는 이점이 있다.

• 사용자가 여러 로그인 유형을 transition할 수 있도록 허용하는 경우

<template v-if="loginType === 'username'">
	<label>사용자 이름</label>
	<input placeholder="이름을 입력하세요" key="username-input">
</template>
<template v-else>
	<label>이메일</label>
	<input placeholder="이메일 주소를 입력하세요" key="email-input">
</template>

v-show

엘리먼트를 조건부로 표시하기 위한 또 다른 디렉티브로, 사용법은 거의 동일하다.

v-show가 false일때는 CSS display: none;처리가 되는 것으로, v-if와 차이점은 v-show가 있는 element는 항상 렌더링되고, DOM에 남아있다.(v-show는 단순히 element에 CSS display를 토글하는 것임)