조건부 렌더링

공식 참고 문서

https://v3.ko.vuejs.org/guide/conditional.html

조건부 렌더링 | Vue.js

 

v-if: 조건이 참 일때  Html 태그를 렌더링 할 때 사용한다.

개발자 도구에서 코드를 확인해도 보이지 않는다.

 

v-show: v-if와 마찬가지로 조건이 참일 때 Html 태그를 보여준다.

개발자 도구에서 코드를 확인할 수 있다. -> display: none으로 설정 되어 있다.

 

초기에는 v-if를 사용하였다가 사용자가 자주 그 기능을 사용한다면 v-show를 사용하는 것을 권장한다.(전환 비용 문제)

 

예제 코드

<template>
  <button @click="handler">
    Click me!
  </button>
  <h1 v-if="isShow">
    HELLO!
  </h1>
  <h1 v-else-if="count > 3">
    Count > 3
  </h1>
  <h1 v-else>
    Good!
  </h1>
  <!-- 여러 태그를 한번에 컨트롤 하는 방법 -->
  <!--최상위 template에서는 적용되지 않는다. -->
  <template v-if="isShow">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>
  <h1 v-show="isShow">
    v-show 예제
  </h1>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      count: 0
    }
  },
  methods: {
    handler() {
      // 현재 값의 반대 값으로 변경
      this.isShow = !this.isShow
      // 1씩 증가
      this.count += 1
    }
  }
}
</script>

 

브라우저 확인