Vue 조건부 렌더링

 

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

• 조건에 따라 블록을 렌더링할 때 사용
• 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링

---

- <template>에 v-if를 갖는 조건부 그룹 만들기

• v-if는 디렉티브이기 때문에 하나의 엘리먼트에 추가되어야 함
• 둘 이상의 엘리먼트를 전환하려면 <template> 엘리먼트 사용
• <template> 엘리먼트는 눈에 보이지 않게 내부 엘리먼트를 감싸는 역할을 하며, 최종 렌더링 결과에 포함되지 않음

---

- v-show

• v-show 엘리먼트의 경우 항상 렌더링 되어 DOM에 남아있음
• v-show는 단순히 엘리먼트의 CSS display 속성만을 전환
• v-show는 <template> 엘리먼트를 지원하지 않으며, v-else와 함께 사용불가

---

- v-if vs v-show

• v-if
  • 실제 조건부 렌더링
  • 전환 도중 조건부 블록 내부의 이벤트 리스너 및 자식 컴포넌트들이 올바르게 제거되고 다시 생성
  • 초기 렌더링 시, 조건이 거짓(false)이면 아무 작업도 하지 않음
  • 조건부 블록은 조건이 처음으로 참(true)이 될 때까지 렌더링되지 않음
    
    
• v-show
  • 엘리먼트는 CSS 기반 전환으로 초기 조건과 관계 없이 항상 렌더링
    (역자 주: v-show는 엘리먼트를 DOM에 우선 렌더링하고 조건에 따라 CSS display: block / display: none 속성을 전환합니다.)
    
    
• 정리
  • 일반적으로 v-if는 전환 비용이 높은 반면, v-show는 초기 렌더링 비용이 높음
  • 자주 전환해야할 경우: v-show
  • 런타임 시 조건이 변경되지 않는 경우: v-if

---

[ 참고자료 ]

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

조건부 렌더링 | Vue.js