Vuejs 개념 정리05 조건부 렌더링

해당 게시글은 Vuejs Tutorial을 리뷰한 내용입니다. 

Vuejs Tutorial 리뷰

https://vuejs.org/v2/guide/syntax.html

 

 

 

 

v-if

v-if 디렉티브는 조건에 따라 블록을 렌더링할 때 사용함

v-else와 함께 “else 블록”을 추가하는 것도 가능함

 

** 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됨

 

 

 

 

v-if는 디렉티브기 때문에 하나의 엘리먼트에 추가해야 한다

하나 이상의 엘리먼트를 트랜지션하려면?

=> 보이지 않는 래퍼 역할을 하는 <template> 엘리먼트에 v-if를 사용

=> 최종 렌더링 결과에는 <template> 엘리먼트가 포함되지 않는다

 

 

 

 

 

예시로

template에 v-if를 가지는 조건부 그룹을 만들어보자

<template v-if="ok">
  <h1>v-if로 조건부 그룹 만들기</h1>
  <p>오늘 점심은 보리밥이었다</p>
  <p>아주 대단했다</p>
</template>

 

 

v-else로 else 블록 추가도 할 수 있다고 했으니

예시를 들어보자면

<div v-if="Math.random() > 0.5">
  일정 숫자 이상이면 보이게 해줘라
</div>
<div v-else>
 일정 숫자 미만이면 안보이겠지
</div>

**

v-else 엘리먼트는 

v-if 엘리먼트 또는 v-else-if 엘리먼트 바로 뒤에 있어야만 사용할 수 있다

 

 

 

 

 

 

 

 

v-else-if 는 

(((2.1.0 버전부터 제공됨)))

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-if 엘리먼트는

v-else와 마찬가지로,  v-if 또는 v-else-if 엘리먼트 바로 뒤에 와야 사용할 수 있다

 

 

 

 

**

vuejs에서는 v-if는 제공하지만 switch문은 제공하지 않는다

switch문을 쓰고싶으면 쓸 수는 있는데 Custom 디렉티브를 설정해줘야 가능하다

 

 

 

 

 

 

v-show

엘리먼트를 조건부로 표시하기 위한 옵션

<h1 v-show="ok">하이하이!</h1>

차이점은 

v-show가 있는 엘리먼트는 항상 렌더링 되고 DOM에 남아있다는 점

v-show는 단순히 엘리먼트에 display CSS 속성을 토글