[ Vue ] 조건부 렌더링에 사용되는 v-if와 v-show

어떤 것을 사용해야 할 지 고민하다가 정리했다.

https://ko.vuejs.org/guide/essentials/conditional#v-if-vs-v-show

 

공식 문서에서 분명하게 잘 설명해줬기 때문에 이를 좀 더 확실히 기억하고자 테스트해봤다.

 

---

v-if

v-if 문의 경우 조건의 성립(True / False) 여부에 따라 요소의 렌더링 여부가 결정된다.

 

---

v-show

v-show의 경우 조건 결과와 관계없이 태그를 렌더링하지만, False의 경우 display: none 처리를 통해 보이지 않게 한다.

 

---

결론적으로,

→ 보였다/ 안 보였다 빈도가 많으면 v-show

→ 조건이 여러 개면 v-if (v-else-if, v-else 등 사용 가능)