조건부 렌더링

 

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

 

 

v-if는 디렉티브기 때문에 하나의 엘리먼트에 추가해야 합니다.
하지만 하나 이상의 엘리먼트를 트랜지션하려면 어떻게 해야 할까요?

이 경우 우리는 보이지 않는 레퍼 역할을 하는 <template>엘리먼트에 
v-if를 사용할 수 있습니다.
최종 렌더링 결과에는 <template>엘리먼트가 포함되지 않습니다.

HTML 부분
<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph1</p>
    <p>Paragraph2</p>
</template>

#v-else
v-else 디렉티브를 사용하여 v-if에 대한 "else블록"을 나타낼 수 있습니다.

HTML부분

<div v-if="Math.random() > 0.5">
    이제 나를 볼 수 있어요
</div>
<div v-else>
    이제는 안보입니다.
</div>

#v-else-if
2.1.0버전부터 새롭게 추가됨

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>
v-else와 마찬가지로 v-else-if 엘리먼트는 v-if 또는 v-else-if엘리먼트 바로 뒤에 와야 합니다.