3.4.6 v-if를 사용해서 체크아웃 페이지 표시

애플리케이션이 너무 밋밋합니다. 웹 페이지 하나에 상품을 하나만 보여 주고 있죠. 더 완벽하게 만들려면 체크아웃 정보를 보여 주는 다른 웹 페이지가 필요합니다. 여러 방법을 사용할 수 있습니다. 7장에서는 애플리케이션을 더 작은 재활용 가능한 조각으로 나누는 방법을 배울 것입니다. 이는 체크아웃 페이지를 추가하는 방법 중 하나입니다.

다른 방법으로는 v-if 지시자로 뷰를 묶어 일전에 만든 showProduct 속성에 연결하는 것입니다. 코드 3-17과 같이 v-if 지시자를 index 파일 상단에 main과 div 요소 다음에 추가합니다.

코드 3-17 v-if를 사용해서 체크아웃 페이지 표시하기: chapter-03/v-if-checkout.html

<main>
  <div class="row product">
    <div v-if="showProduct"> -- showProduct가 참일 때 표시할 v-if 지시자입니다. 
... -- 상품 그림과 설명을 포함한 뷰의 상품 리스트를 보여 줍니다. 
    </div>
    <div v-else>
... -- 체크아웃 페이지가 들어갈 자리입니다. 
    </div>
  </div>
</main>

---