[Udemy Vue 완벽가이드 Section3] 42. v-if, v-else 및 v-else-if

v-if에서 알아두면 좋은 내용이 몇 가지 있다.

참(truthy)과 거짓(falsy)값을 처리하는 표현식을 쓸 수 있다.

일반적인 if문과 같다.

if(true) {
  ..
}

위 true 부분에서 검사할 수 있고, JS에 의해 truthy나 falsy로 처리된다.

&&(and)나 ||(or) 등으로 조건을 결합할 수도 있다.

 

computed 프로퍼티, data 프로퍼티를 가리킬 수 있고, truthy나 falsy값을 반환하는 method를 실행할 수도 있다.

 

 

<p>뿐만 아니라, <ul>도 조건부로 출력해야한다.

goal이 있을 때만 <ul>이 출력되게 해보자.

<ul>에도 v-if를 추가하고, goals.length > 0 이렇게 검사를 한다.

<p v-if="goals.length === 0">No goals..</p>
<ul v-if="goals.length > 0"></ul>

위와 같이 작성해도 되지만, 이 경우 <ul>에 v-else를 써도 된다.

 

# v-else 사용시, 주의할 점

v-else를 사용할 때는 v-if가 있는 요소 바로 다음 요소에 써야 한다.

그 사이에 다른 요소가 올 수 없다. 중간에 다른 요소가 오게되면 v-else가 실행되지 않는다.

<p v-if="goals.length === 0">No goals..</p>
<p>...</p> <!--이렇게 되면 아래 v-else가 실행되지 않는다.-->
<ul v-else></ul>

 

v-else는 v-if가 있는 요소의 direct neighbor element(직접적인 이웃요소)에 사용되어야 한다.

 

 

# v-else -if

여러 조건이 포함된 시나리오가 있을 수 있다. 그럴 때는 v-else-if 조건을 쓰면, goals.length가 0보다 큰지 검사할 수 있다.

<p v-if="goals.length === 0">No goals..</p>
<ul v-else-if="goals.length > 0"></ul>
<p v-else></p> <!--위 두 개의 조건에 충족되지 않을 경우, fallback-->

 

v-if, v-else-if, v-else를 사용함으로써 HTML코드의 어떤 부분이 최종 페이지에 출력되는지를 제어할 수 있다. 단순히 어떤 부분을 숨기는 것과는 다르다. DOM에 해당요소를 넣을지 말지를 결정한다는게 중요하다.

 

개발자도구를 보면 goal을 추가하면, <p>요소가 완전히 사라진다.

v-if는 콘텐츠를 조건부로 표시할 때 유용해서 다양한 애플리케이션을 구축할 때 사용 많이한다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.