v-if의 응용/팁

참이면 이것을 보여주거나

거짓이면 저것을 보여주는 게 보통인데

 

조건에 따라서 이것만 보여주기, 저것만 보여주기, 그리고 다 보여주고 싶을 때!!!!!

어떻게 해야 하나

 

공부를 하면서 찾은 방법을 기록해 둔다.

 

예를 들어, 

결제수단을 신용카드를 선택할 경우, 현금을 선택할 경우에 따라 

다른 문구를 보여주는 화면을 만드는데 

 

처음에는 

<div class="application__contents">
 <p class="todo__text">
  지불 방법을 결정한 후, 이하의 순서로 신청해주세요
  <div class="application__note" v-if="v-if="paymentMethod === '00'"> // 신용카드방식
   <p class="detail__title">신용카드의 경우</p>
   <p class="detail__text">신용카드일 경우 이런 이런 방식으로 신청해주세요</p>
  </div>
  <div class="application__note" v-else> // 현금방식
   <p class="detail__title">현금의 경우</p>
   <p class="detail__text">현금일 경우 이런 이런 방식으로 신청해주세요</p>
  </div>
 </p>
</div>

처음에는 이경우였다

v-if, v-else로

paymentMethod가 00일 때는 신용카드 , 01일 때는 현금방식을 보여주려고 했는데

 

 

설계서는 

저거와 더불어 paymentMethod가 null일 때

신용카드 방식과 현금방식 저 두 가지를 다 보여주어야 한다. 

 

이럴 때,

조건이 이것일 때는 이것

조건이 저것일 때는 저것

조건이 null일 때는 전부 

 

이 경우에는 어떻게 분기처리를 해줄까?

 

<div class="application__contents">
 <p class="todo__text">
  지불 방법을 결정한 후, 이하의 순서로 신청해주세요
  <div class="application__note" v-if="fireInsurancePaymentMethod === '00' || fireInsurancePaymentMethod === null"> // 신용카드방식
   <p class="detail__title">신용카드의 경우</p>
   <p class="detail__text">신용카드일 경우 이런 이런 방식으로 신청해주세요</p>
  </div>
  <div class="application__note" v-if="fireInsurancePaymentMethod === '01' || fireInsurancePaymentMethod === null" )> // 현금방식
   <p class="detail__title">현금의 경우</p>
   <p class="detail__text">현금일 경우 이런 이런 방식으로 신청해주세요</p>
  </div>
 </p>
</div>

이렇게 쓰면 되더라~

v-if로 분기처리를 한 후

그다음 태그에서도

v-if를 써주면 된다.

 

 

내 같잖은 머릿속에서는 계속

v-if를 썼으면 그다음에는 v-else-if나 v-else를 써야 한다는 

뭔가 고정관념이 박혀있었다. 

 

v-if를 쓰고 그다음줄에 

새로운 v-if로 분기처리를 해 줄 수도 있다는 것을

이번 기회에 다시 배우게 되었다