Vue Tutorial 따라하기 - Conditional Rendering

Vue.js의 조건문

상품 상세 정보를 출력하려 한다.

조건문을 사용해 만약 제품의 재고가 있다면 "In Stock"을 출력하고, 재고가 없다면 "Out of Stock"을 출력하게 할 것.

 

 v-if & v-else 

v-if를 통해 조건문을 생성해 주었다.

js파일에 instock이라는 속성을 불린 값 true와 함께 추가해주고,

html 파일에 v-if, v-else 즉, vue 조건문을 추가해줬다.

 

Tips!

v-if문을 사용할 때, 꼭 v-else문과 함께 짝을 지을 필요는 없다. 만약 if문 하나만 필요하다면 하나만 사용 가능!

 

 

---

 

 v-show 

v-show는 v-if문과 비슷하지만, 스위치처럼 토글 방식으로 작동하는 조건문이다.

true인 경우 출력되고 아닌 경우 해당 태그의 style이 display:none 되어 안 보이게 처리된다.

 

Note!

visibility:hidden은 해당 공간은 차지한 채 안 보이게 처리

display:none은 차지하던 자리 자체를 삭제한다.

---

 v-if & v-else-if & v-else : 조건문에 조건 여러 개 사용하기 

js파일에 inStock속성을 inventory속성으로 변경하고, 실제 재고 개수를 입력하도록 변경하였다.

html 파일에 v-if문에 else-if 구문을 추가하였다.

 

아래의 예제를 통해 재고가 8개일 때 'Almost Sold Out'을 출력하는 것을 확인할 수 있다.

조건에 따라 v-if-else구문에 해당하는 값이 출력된것 확인가능