코드를 실행한 결과는 다음과 같습니다.

그림 3-14 실행결과

이때 화면에 보이지 않는(unvisible) 요소는 DOM에 추가된 다음에 감춰지는 것이 아니라 아예 DOM에 추가되지 않는 방식으로 처리됩니다. 웹 브라우저에서 개발자 도구(F12)를 열어 Elements 탭을 보면 다음과 같이 v-if 부분이 주석 처리되어 요소가 DOM에 추가되지 않았다는 것을 알 수 있습니다.

그림 3-15 DOM에서 렌더링 제외 확인