v-if,v-else-if,v-else

<template>
  <h1 v-if="type == 'A'">A</h1>
  <h1 v-else-if="type == 'B'">B</h1>
  <h1 v-else-if="type == 'C'">C</h1>
  <h1 v-else>Other</h1>
</template>

<script>
export default { 
  data() {
    return {
      type: "Q",
    };
  },
};
</script>

---

v-show

<template>
  <h1 v-show="bRender">A</h1>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      bRender: true,
    };
  },
};
</script>

---

v-if ,v-show 나뉜 이유

랜더링되는 방식 차이

v-if는 조건이 만족하면 그순간 html 부분이 생기고

만족하지않으면 html블록이 삭제됨

v-show는 화면에 안보이는데 개발자 도구를 보면 display:none이 되어있음

html이 초기에 한번 로딩될때 조건에 의해서 보이거나 안보이는거면 v-if가 좋고

한 화면에서 계속 보였다가 안보였다가 하는 경우가 필요할땐 v-show가 좋다 <이게 훨신 빠르고 가볍다.