728x90
참이면 이것을 보여주거나
거짓이면 저것을 보여주는 게 보통인데
조건에 따라서 이것만 보여주기, 저것만 보여주기, 그리고 다 보여주고 싶을 때!!!!!
어떻게 해야 하나
공부를 하면서 찾은 방법을 기록해 둔다.
예를 들어,
결제수단을 신용카드를 선택할 경우, 현금을 선택할 경우에 따라
다른 문구를 보여주는 화면을 만드는데
처음에는
<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로 분기처리를 해 줄 수도 있다는 것을
이번 기회에 다시 배우게 되었다
728x90
'Vue3' 카테고리의 다른 글
요소의 택스트가 머스태치(Mustache)만 있을 때 v-text를 사용해보자! (0) | 2023.09.10 |
---|---|
4.Composition API기본 (Vue Router) (0) | 2022.04.17 |
3.Composition API기본(Watch , WatchEffect) (0) | 2022.04.17 |
2.Composition API기본 (setup, ref, reactive) (0) | 2022.04.14 |
왜? Composition API 인가? (1) (0) | 2022.04.14 |