v-if v-show 디렉티브 차이

vue 프레임워크에 조건부 렌더링 디렉티브에는 v-if, v-show 두 가지가 있습니다.

 

차이는 존재는 하나 보이지 않는 것(display:none)과 존재 자체를 지우는 차이(주석 처리)입니다. (개발자 도구 참조)

 

 v-show 디렉티브 사용

 

 

개발자 도구 확인

v-show를 사용하게 되면 작성하지 않은 diplay:none속성이 적용되어있습니다.

 

화면에만 존재하지 않기 위한 목적입니다.

 

v-if 디렉티브 사용

같은 부분 확인

v-if를 사용하게 되면, 존재 자체가 사라지게 됩니다. 주석 처리 한 것과 같습니다.





'눈에만 보이지 않는 것과', '존재하지 않는 것' 두 가지 차이로 구분하는 것입니다.



어떤 경우에 사용하게 될까요?



v-if는 로그인 / 로그아웃 버튼에 사용합니다. 로그인을 하게 되면, 로그인 버튼은 필요하지 않기 때문입니다



v-show는 dialog 창에 사용합니다. 사용자에게 보이지는 않으나 존재해야 되기 때문입니다.

참고 https://kr.vuejs.org/v2/guide/conditional.html

조건부 렌더링 — Vue.js