[VueJS] vue 조건 렌더링 v-show / v-if, v-else-if, v-else 사용방법 및 차이점

vueJS에서 제공하는 조건 렌더링 v-show 와 v-if 문법에 대해 알아보자.

 

script 에서 사용하는 if와 동일하며,

dom 요소를 조건에 따라 true일 때는 보이고 false일 때는 안보이게 하기 위해 사용된다.

 

코드를 통해 v-show 와 v-if 문법의 사용법과 차이점에 대해 알아보도록하자.

---

▷ v-show 문법

<div id='it_list'>
    <span v-show="true">v-show 보이기</span>
    <span v-show="false">v-show 숨기기</span>
</div>

new Vue({
  el: '#it_list',
  data: {
  },
  methods: {
  }
});

 

▷ 결과

 

결과를 보면 알겠지만 v-show의 특징은 조건이 false일 경우 dom 요소는 생성하지만 display:none 이라는 스타일을 가진 상태로 생성이 되어 화면상에서는 보이지 않는다.

 

▷ v-if 문법

<div id='it_list'>
    <!-- v-if,v-else-if,v-else -->
    <span v-if="true">v-if</span>
    <span v-else-if="true">v-else-if</span>
    <span v-else>v-else</span>
  
    <!-- v-if의 특징 -->
    <span v-if="true"> v-if 특징</span>
    <span v-if="false"> v-if 특징</span>
 </div>

new Vue({
  el: '#it_list',
  data: {
  },
  methods: {
  }
});

 

▷ 결과

 

v-if 문법의 특징은 조건이 false일 경우 결과 화면처럼 dom 요소를 생성조차 하지 않는다.

그리고 script에서의 if문처럼 v-if/v-else-if/v-else 역시 사용이 가능하다.

---

음 사실 둘다 사용해 본 결과 그냥 상황에 따라 골라서 사용해주면 된다.

나 같은 경우에는 아무래도 v-if 문법보다는 v-show를 더 자주 사용하는 편이다.