이제 크롬에서 애플리케이션을 실행하면 장바구니에 상품을 5개 담았을 때 활성화되던 버튼(그림 3-14 참고)이 비활성화되는 것을 볼 수 있습니다.

v-if와 v-else 지시자를 사용해서 Vue.js는 (거짓일 때) DOM에서 한 요소를 제거하고, (참일 때) 다른 요소를 제거합니다. 이 모든 과정은 DOM에 단일 혹은 동시 업데이트의 일부로 이루어집니다. 콘솔에서 availableInventory 값으로 이것저것 해 보면서 해당 요소의 display 속성을 주시하세요.

▲ 그림 3-14 v-if와 v-else를 사용해서 재고가 비었을 때 버튼을 완전히 없애지 않고 비활성화된 버튼을 렌더링할 수 있음