vue.js 공식문서 따라하기 - Conditional Rendering(조건부 렌더링) — '알'아두면 '쓸'모있고픈 '신'나는 '잡'지식

* 공식문서 vuejs.org/v2/guide/conditional.html 를 공부하며 작성한 글입니다.

v-if

v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용됩니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. v-else와 함께 “else 블록”을 추가하는 것도 가능합니다.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Sample</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
      <h1 v-if="awesome">Vue is awesome!</h1>
      <h1 v-else>Oh no 😢</h1>
    </div>
    <script>
     var vm =  new Vue({
        el: '#app',
        data: () => ({
          awesome: false,
        }),
      })
    </script>
  </body>
</html>

v-else-if

v-else-if는 이름에서 알 수 있듯, v-if에 대한 “else if 블록” 역할을 합니다. 또한 여러 개를 사용할 수 있습니다.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Sample</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
      <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>
    </div>
    <script>
     var vm =  new Vue({
        el: '#app',
        data: () => ({
          type: '',
        }),
      })
    </script>
  </body>
</html>

v-if 조건부 그룹 만들기

v-if는 디렉티브기 때문에 하나의 엘리먼트에 추가해야합니다. 하지만 하나 이상의 엘리먼트를 트랜지션하려면 어떻게 해야할까요? 이 경우 우리는 보이지 않는 래퍼 역할을 하는 <template> 엘리먼트에 v-if를 사용할 수 있습니다. 최종 렌더링 결과에는 <template> 엘리먼트가 포함되지 않습니다.

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

v-show

v-if와 거의 동작이 비슷하다. ok가 참이면 화면에 표시된다.

<h1 v-show="ok">Hello!</h1>

v-if vs v-show

v-if는 "실제"조건부 렌더링입니다. 이것은 v-if 조건에 따라 컨포넌트가 제거 / 생성 됩니다. 초기에 조건이 false일때는 아무 수행하지 않는 상태로 비용이 들어가지 않습니다.

v-show는 css 기반으로 display가 show / hide 되는 구조로 항상 렌더링됩니다.

일반적으로 v-if는 토글 비용이 더 높은 반면 v-show는 초기 렌더링 비용이 더 높습니다. 따라서 무언가를 자주 토글해야하는 경우 v-show를 선호하고 런타임시 조건이 변경되지 않을 경우 v-if를 선호합니다.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Sample</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
      <input type="button" id="toggle" value="toggle" v-on:click="toggle()">
      <h4>key의 값 {{key}}</h4>
      <div>
        <h3>v-if</h3>
        <div v-if="key">
          v-if
        </div>
      </div>
      <div>
        <h3>v-show</h3>
        <div v-show="key">
          v-show
        </div>
      </div>
    </div>
    <script>
     var app = new Vue({
        el: '#app',
        data: function(){
          return {
            key: true
          }  
        },methods:{ 
          toggle: function(){
            this.key  = !this.key
          }
        }
      })
    </script>
  </body>
</html>

v-if with v-for

v-if 와 v-for를 함께 사용하는것은 권장하지 않습니다. 자세한 내용은 vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential 를 참조하세요.

v-if 와 v-for를 함께 사용하면 v-for가 v-if보다 우선순위가 높습니다. 자세한 내용은 다음 편 list rendering(목록 렌더링)

에서 소개하도록 하겠습니다.

저작자표시

'vue.js > vue.js 공식문서' 카테고리의 다른 글

vue.js 공식문서 따라하기 - List Rendering(리스트 렌더링) (0)	2021.02.23
vue.js 공식문서 따라하기 - computed와 watch (0)	2021.02.16
vue.js 공식문서 따라하기 - 템플릿 문법(Template Syntax) (0)	2021.01.29
vue.js 공식문서 따라하기 - vue 인스턴스(Instance) (0)	2021.01.26
vue.js 공식문서 따라하기 - vue.js 시작하기 2탄 (0)	2021.01.25