[vue.js] v-show, v-if, v-else

 

 

1. 조건부 렌더링

조건부 렌더링이란 조건에 따라 다르게 렌더링 할 수 있는 것을 말하며,

v-show, v-if, v-else, v-else-if 가 있다.

 

 

 

2. v-show

v-show는 조건 상태값에 따라 결과값이 보이고 보이지 않게 된다..

즉 display의  css 속성을 토글해 보여주거나 감추는 것이다.

 

v-show="조건상태" 

이렇게 쓸 수 있다.

 

 

예를 들어 어떤 글자가 꼭 입력이 되야만 생성되는 버튼을 만든다고 한다면

다음과 같이 v-show 디렉티브를 이용해 만들 수 있다.

저번에 포스팅했던  v-model 을 이용해 textarea를 message 변수와 바인딩 해서 메세지를 표시한다.

그리고 button에 v-show="조건상태" 를 입력하여 textarea에 글이 있으면 버튼이 보이게끔 하고, 글이 없다면

button의 display 속성이 none이 되어 사라지게 할 수 있다.

 

만약 <button v-show="!message">이렇게 한다면 글이 있으면 버튼이 안보이고, 글이 없다면 버튼이 보일 것이다.

 

다음과 같이 출력된다.

서로 다른 엘리먼트를 토글 할수도 있다.

예를 들어 <h1>을 안내문구라고 하고, textarea에 글을 입력하면 안내문구인 h1태그는 안보이고, 제출버튼은 보이게된다. 

하지만 textarea에 글을 입력하지 않는다면, 글을 입력해야만 버튼이 보인다는 h1태그를 보여주고, 제출버튼은 보이지 않게 된다.

 

그렇다면 다음과 같이 변경하면 된다.

 

다음과 같이 화면이 출력된다.

 

 

 

 

2. v-if

v-if 디렉티브는 조건상태가 true 이면 해당태그를 렌더링하고, false인 경우 렌더링을 하지 않는 디렉티브이다. 

만약 아까 v-show로 했던 부분을 v-if로 작업한다면 다음과 같이 할 수 있을 것이고,

이것은 v-show로 했을 때와 똑같은 화면을 출력한다.

 

 

 

 

3. v-if 와 template

여러개의 엘리먼트를 한 번에 토글해야 하는 경우 <template> 엘리먼트에서 v-if를 사용하면 된다.

즉 v-if 디렉티브는 하나의 태그에만 동작하는 것이 아니라, 해당 태그의 하위 태그에도 동작한다는 것이다.

따라서 template 태그를 이용하여 조건부 그룹을 만들어서 적용할 수 있다. 

<div> 또는 <span>을 사용하는 것이 적절하지 않은 경우에도 <template>을 보이지 않는 래퍼로 사용할 수 있다.

<template>는 최종 결과에 렌더링 되지 않는다.

또한 v-show 디렉티브는 <template>에서 사용 할 수 없다.

다음과 같이 template 태그에 v-if를 해보았다.

똑같이 textarea에 글이 있으면 template 태그로 묶여있는 h1과 p 태그는 보이지 않게되고 버튼이 보이며,

textarea에 글이 없으면 h1과 p태그가 보이고 버튼이 보이지 않게된다.

 

화면 출력

 

 

 

4. v-else

v-if 를 사용하는 경우 v-else 디렉티브를 사용해 'else'블록을 지정할 수 있다.

v-else디렉티브는 v-if의 다음에 나와야하며 그렇지않으면 인식이 되지 않음으로 유의한다.

 

글이 없을 안내문구인 첫번째 h1태그에 v-if를 사용했다.

v-else를 사용할 땐 v-if다음에 나와야함으로, 첫번째 h1태그의 바로 다음에 써주었다.

이제 textarea에 글이 없으면 글을 써야 버튼이 나온다는 h1태그의 안내문이 나오고 버튼은 없어지며,

textarea에 글이 생기면 이제 제출 하라는 두번째 h1태그의 안내문이 나오면서 버튼이 생성될 것이다.

 

 

화면출력

 

 

 

5. v-else-if

v-else-if는 v-if에 대한 else if 블록 역할을 하며, 여러개 사용 가능하다.

또한 v-else-if 는 v-else와 마찬가지로 v-if나 v-else-if 바로 다음에 와야한다.

 

 

 

 

6. v-if 와 v-show의 차이점

 

- v-if : 조건에 부합되지 않으면 렌더링 하지않는다. 

       따라서 조건이 충족되지 않으면 내용은 실제로 렌더링 하지않아 콘솔에 찍히지 않는다.

 

- v-show : 우선 렌더링되고, css 속성으로 감추거나 보여줌. 

            즉 v-show가 있는 엘리먼트는 항상 렌더링 되어 DOM에 남아있고, display 속성으로 화면에 보여줄

            지의 여부를 판단한다.  따라서 실제 조건이 충족되지 않았음에도 콘솔에 렌더링 되어 있는 것을 확인할 수 있다.

 

 

v-show를 사용하면 페이지 렌더링 중에 더 많이 로드 시간이 발생하여 초기 렌더링 비용이 높고

v-if는 토글 비용이 높다.

 

따라서 무엇인가를 자주 토글해야하는 경우에는 v-show를,

런 타임에 조건이 자주 변경될 가능성이 낮은 경우에는 v-if를 사용하는 것이 좋다.