v-if

v-if 디렉티브는 조건부로 블록을 렌더링 할 때 사용됩니다.

<h1 v-if="visible">Hello Vue3!</h1>

v-else

v-else 디렉티브는 v-if가 거짓(false)일 때 렌더링 하는 블록입니다.

<h1 v-if="visible">Hello Vue3!</h1>
<h1 v-else>Good bye!</h1>

v-else-if

v-else-if는 이름에서 알 수 있듯이 v-if에 대한 ‘else if 블록' 입니다. 여러 조건을 연결할 수 있습니다.

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

<template v-if=””>

여러개의 HTML요소를 v-if 디렉티브로 연결하고 싶다면 <template>을 사용할 수 있습니다.

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

v-show

요소를 조건부로 표시하는 또 다른 옵션은 v-show 디렉티브 입니다.

<h1 v-show="show">Title</h1>
	<button @click="show = !show">toggle show</button>