조건부 렌더링

v-if

{{#if ok}}
  <h1>Yes</h1>
{{/if}}

조건문을 다음과 같이 사용이 가능하다.

Vue에서는 

<h1 v-if="ok">Yes</h1>

v-if디렉티브를 사용한다.

<h1 v-if="ok">Yes</h1> <h1 v-else>No</h1>

v-else도 사용이 가능하다.

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

엘리먼트를 묶어서 v-if디렉티브가 사용이 가능합니다.

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

최종 렌더링 결과에는 템플릿 엘리먼트는 없습니다.

v-else

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

v-else-if

2.1에서 추가됐다.

<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를 이용한 재사용 가능한 엘리먼트 제어

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

위 코드는 logintype이 바뀌어도 렌더링 결과가 바뀌지 않습니다.

<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

<h1 v-show="ok">안녕하세요!</h1>

항상 DOM에 남아있고 display를 변경해준다.

v-if vs v-show

v-if는 조건부 블럭 안의 이벤트 리스너와 자식 컴포넌트가 토글하는 동안 적절하게 제거되고 다시 만들어지기 때문에 “진짜” 조건부 렌더링 입니다

v-if는 또한 게으릅니다 초기 렌더링에서 조건이 거짓인 경우 아무것도 하지 않습니다. 조건 블록이 처음으로 참이 될 때 까지 렌더링 되지 않습니다.

비교해보면, v-show는 훨씬 단순합니다. CSS 기반 토글만으로 초기 조건에 관계 없이 엘리먼트가 항상 렌더링 됩니다.

일반적으로 v-if는 토글 비용이 높고 v-show는 초기 렌더링 비용이 더 높습니다. 매우 자주 바꾸기를 원한다면 v-show를, 런타임 시 조건이 바뀌지 않으면 v-if를 권장합니다.

v-if 와 v-for

v-if와 함께 사용하는 경우, v-for는 v-if보다 높은 우선순위를 갖습니다. 자세한 내용은 리스트 렌더링 가이드를 확인하십시오.