조건부 렌더링 (v-if/v-else/v-else-if/v-show)

v-if/v-else/v-else-if

• v-if/v-else/v-else-if는 조건에 따라 블록을 렌더링할 때 사용한다.
• v-else는 반드시 v-if나 v-else-if 뒤에 와야하고 v-else-if도 마찬지이다!!

 

• 아래 예시를 보면, name이 Lee로 시작하면 Lee를 렌더링하고 그렇지 않으면 Duck을 렌더링한다.

<template>
  <div v-if="name.startsWith('Lee')">Lee</div>
  <div v-else>Duck</div>
</template>

<script>
export default {
  data() {
    return {
      name: "duck 90",
    };
  },
};
</script>
<style scoped>
div {
  font-weight: bold;
  font-size: 1.5rem;
}
</style>

• 사실 위 v-if/v-else 구문은 아래처럼 삼항연산자를 사용해서 표현할 수도 있다.

<div>{{ name.startsWith("Lee") ? "Lee" : "Duck" }}</div>

v-show

• 일단, v-if와 v-show는 같은 결과를 나타낸다.
• 우선, v-show는 v-if와 v-else-if 구문을 사용할 수 없다.
• 더 큰 차이는 v-if는 조건이 성립하지 않는다면 태그 자체를 렌더링하지 않지만 v-show는 조건이 맞지 않아도 렌더링을 하고 display:none을 해서 화면에 보이지 않게 한다.
  • 즉, 조건에 따라서 엘리먼트가 새로 렌더링 되는게 아니라 CSS의 display 속성이 변경된다.
• v-if는 교체 비용이 크고 v-show는 초기 렌더링 비용이 큰 대신 교체 비용이 작기 때문에, 자주 변화하는 state를 이용하는 조건이라면 v-show를 사용하고 그렇지 않다면 v-if를 사용하자!

 

• 아래와 같이 v-if와 v-model을 이용해서 둘 다 조건에 맞지 않게 만들어서 화면에 아무것도 나오지 않게 한 후 개발자 도구를 열어보자!

<template>
  <div v-if="name.startsWith('Lee')">Lee</div>
  <div v-show="name.startsWith('Lee')">Lee</div>
</template>

<script>
export default {
  data() {
    return {
      name: "duck 90",
    };
  },
};
</script>
<style scoped>
div {
  font-weight: bold;
  font-size: 1.5rem;
}
</style>

• v-if 부분은 주석처리 되어서 아예 dom에 반영되지 않았고 v-model은 dom에 올라갔지만 display:none 처리를 해서 화면에 보이지 않게 된다.

 

참고 ↓↓↓↓

https://v3.ko.vuejs.org/guide/conditional.html#v-else-if

조건부 렌더링 | Vue.js