Vue v-if, v-show 디렉티브

v-if 디렉티브

v-if, v-else-if, v-else 형태로 이용할 수 있음.

// /views/RenderingVIf
<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="type=='A'">A</h1>
</div>
</template>
<script>
export default {
 data() {
   return {
     type: 'A'
   };
 }
}
</script>

v-if vs v-show

v-if의 경우 조건을 만족하면 그 순간 html 블록이 생성되고, 조건에 만족하지 않으면 html 블록은 삭제가 됨. 하지만 v-show의 경우 조건 만족 여부에 상관없이 무조건 html 블록이 생성되며, display로 노출여부를 결정.

토글이 자주 일어나면 v-show, toggle이 가끔 일어나면 v-if