더북(TheBook)

여기까지는 v-if 디렉티브와 기능이 같아 보이지만, 요소를 렌더링하는 방식에서 차이가 발생합니다. v-if 디렉티브는 요소를 아예 렌더링하지 않지만, v-show 디렉티브는 요소를 렌더링하고 CSS의 display 속성으로 감춥니다. 개발자 도구(F12)에서 Elements 탭을 확인하면 거짓인 요소에 CSS의 display 속성이 적용된 것을 확인할 수 있습니다.

그림 3-18 v-show 디렉티브의 요소 숨김 처리 방식

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.