3.4.4 v-if와 v-else를 사용해서 버튼 비활성화

장바구니 담기 버튼을 없애서 사용자가 너무 많은 객체를 장바구니에 담는 것은 막을 수 있었지만 지나치게 일이 많습니다. 사용자에게 비활성화된 버튼을 렌더링해서 보여 주는 것이 더 유익할 수 있습니다. 이렇게 해야 최대한 인터페이스의 연속성을 흐리지 않고, 레이아웃을 유지하기 때문입니다.

v-if와 v-else 지시자는 주어진 표현식의 진릿값에 따라 두 가지 선택 중 하나를 표시하는 데 사용됩니다. 코드 3-11과 같이 canAddToCart를 조건으로 사용하겠습니다.

그림 3-13에서 v-if 지시자가 어떻게 작동하는지 볼 수 있습니다. canAddToCart가 참이면 버튼이 생기고, 아니면 버튼이 생기지 않습니다.

▲ 그림 3-13 v-if 지시자 조건이 작동하는 방법을 설명하는 다이어그램