Vue 랜더링 문법(v-if, v-show)

 

v-if 와 v-show 의 차이점

화면 내에서 자주 toggle이 일어난다면 v-show를 사용하는 것이 자원이 절약되고, 그렇지 않은 경우는 v-if 가 자원을 절약한다.

구분	v-if	v-show
랜더링 방식	조건을 만족하는 순간에 html 블록이 생성되고, 조건에 만족하지 않으면 html 블록은 삭제된다. 즉, 조건에 맞는 경우만 랜더링 => 해당 블록에 toggle이 일어날 때 자원을 많이 사용(블록 전체를 생성했다가, 삭제)	조건 만족 여부와 상관없이 무조건 html 블록이 생성된다. 조건을 만족하면 css display를 이용해 화면에 보이는 것.  즉, 조건에 맞지 않아도 무조건 랜더링 => 처음에 자원을 많이 사용

 

 

v-if

<template>
  <div>
    <h1 v-if="type=='A'">A</h1>
    <h1 v-else-if="type=='B'">B</h1>
    <h1 v-else>C</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      type: 'A'
    };
  }
}
</script>

 

 

v-show

<template>
  <div>
    <h1 v-show="bShow">bShow가 true면 보입니다.</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bShow: true
    };
  }
}
</script>