Vue.js 조건부 렌더링 v-if, v-show

🌲v-if

true일 때만 블록을 렌더링하는 디렉티브로 v-else, v-else-if도 함께 사용 가능하다.

---

(예시)

handler를 클릭했을 때 isShow가 true면 Hello!

그렇지 않으면 Bye!

count가 3보다 크면 메세지를 출력해줘

<template>
  <button 
    @click="handler">
    click!</button>
  <h1 
    v-if="isShow">Hello!</h1>
  <h1 
    v-else>Bye!</h1>
  <h1
    v-else-if="count > 3">
    count가 3보다 크다 </h1>
</template>

<script>
export default {
  data () {
    return {
      isShow: true,
      count: 0
    }
  },
  methods: {
    handler() {
      this.isShow = !this.isShow,
      this.count += 1
    }
  }
}
</script>

 

🌳Group

---

• <template>을 사용하여 그룹화된 태그에 v-if를 사용할 수 있다. 
• 렌더링된 DOM에는 <template>은 표시되지 않는다. 즉, <template>은 렌더링되지 않는다.
• v-if는 최상위 <template>에 사용할 수 없다.

<template>
  <button @click="handler">
    click!
  </button>
  <template v-if="isShow">
    <h1>Group</h1>
    <p>This is Paragraph</p>
  </template>
</template>

 

🌲v-show

---

• 조건에 상관없이 항상 렌더링되어 DOM에 남아있다. 단순히 css속성(display)만 변경되어 기능한다.
• 그룹화된 <template>에 적용할 수 없다.
• v-if와 마찬가지로 v-else와 함께 사용 가능하다.

  <h1 v-show="isShow">Group</h1>

 

 

🌲v-if VS v-show

---

🌳v-if

실제 조건에 따라 렌더링되는 조건부 렌더링으로 작동한다.

렌더링이 수시로 되어 전환비용이 높다.

런타임 시 변경이 자주 일어나지 않을 때 사용한다.

🌳v-show

조건과 상관없이 항상 렌더링되므로 초기 렌더링 비용이 높다.

css 속성만으로 표시되며 필요할 때만 동작하므로 lazy라고 표현하기도 한다.

자주 전환되어도 전환 비용이 낮기 때문에 변경이 잦을 때 유용하다.