3.4.3 v-show 지시자 기초

이제 사용자가 장바구니에 담을 수 있는지 결정하는 메커니즘을 알았으니, 알맞은 인터페이스를 만들어 보겠습니다. v-show 지시자는 지정된 조건이 참(true)일 때만 마크업을 렌더링합니다. 여기서 보듯이 현재 버튼에 이를 추가하면 canAddToCart 속성이 거짓일 때 버튼이 사라지는 것을 볼 수 있습니다.

코드 3-11 v-show 지시자를 적용한 버튼: chapter-03/button-v-show.html

<button class="btn btn-primary btn-lg"
    v-on:click="addToCart"
    v-show="canAddToCart" -- v-show 지시자는 canAddToCart 계산된 속성에 연결되어 있습니다. 
    >장바구니 담기</button>

---

 

크롬에서 애플리케이션을 새로 고침하고 장바구니에 상품을 6개 담아 보세요. 아마 다섯 번째 클릭에서 버튼이 사라질 것입니다. 그림 3-12와 같이 availableInventory 값이 거짓(false)이기 때문입니다.

▲ 그림 3-12 재고가 비면 <장바구니 담기> 버튼이 사라짐