Vue-js 문법 - 조건부 렌더링

 

v-if

 

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

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

 

<h1 v-if="awesome">Vue is awesome!</h1>

<!-- v-else와 함께 “else 블록”을 추가하는 것도 가능 -->
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

 

예제

 

<!-- App.vue -->

<template>
  <button @click="handler">
    Click me!
  </button>
  <h1 v-if="isShow">
    Hello?!
  </h1>
  <h1 v-else>
    Good~
  </h1>
</template>

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

 

코드 이해하기

- 처음에는 <Button> 태그 (Click me!)와 <h1> 태그 (Hello?!)가 화면에 출력

- 버튼 (Click me!)을 누르면 메소드 handler()가 동작

- hendler() 메소드는 isShow 데이터가 true면 false, false면 true로 변경

- isShow가 false 이므로 (Hello?!)는 (Good~)으로 변경

 

결론: 버튼을 누르면 (Hello?!)일때는 (Good~), (Good~)일때는 (Hello?!)로 변경됨

 

---

 

v-show

 

- v-if 디렉티브와 거의 동일한 디렉티브

- 차이점은 v-show 를 쓴 엘리먼트의 경우, 항상 렌더링 되어 DOM에 남아있음

- v-show 는 단순히 엘리먼트의 CSS display: none 속성만을 전환

- v-show 는 <template> 엘리먼트를 지원하지 않으며, v-else 와 함께 사용이 불가능함

 

자주 전환해야 한다면 v-show를 사용하는 게 좋고, 런타임 시 조건이 변경되지 않는다면 v-if를 사용하는 게 더 낫다