앞서 체크아웃 버튼을 만들었습니다. 버튼을 누르면 showProduct 속성이 참에서 거짓 혹은 거짓에서 참으로 전환됩니다. 이는 코드 3-17의 v-if 지시자를 실행합니다. 이 장에서 계속 만드는 상품 정보가 표시되거나 상단에 내비게이션만 있는 빈 화면이 표시됩니다(그림 3-15 참고).

▲ 그림 3-15 <체크아웃> 버튼을 누른 후의 웹 스토어 뷰(<체크아웃> 버튼을 다시 누르면 상품 페이지를 보여 준다)

 

지금은 그림 3-15의 빈 화면은 걱정하지 마세요. 다음 장에서 다양한 입력 바인딩을 알아보면서 처리하겠습니다.