[Vue.js] v-if / v-show

v-if    v-show 둘 다 조건에 따라 요소를 출력한다

 

// false 일 경우 출력이 되지 않음
  <div v-if="bool">if</div>
  <div v-show="bool">show</div>

 

그런데 두개의 차이점은 false로 실제로 렌더링이 되었을때

v-if는 주석으로 출력이 되고

v-show는 스타일로 보이지 않게만 나타난다

<!---->
<div style="display:none">show</div>

 

v-if 로 출력할 때 조건에 만족하지 못한 경우 요소는 DOM레벨에서도 제거 모든 상태가 초기화된다

 

v-show로 출력할 때 조건에 만족하지 못한 경우에는 보이지는 않더라도 내부적으로 데이터에 대한 감시가 일어나므로

주의가 필요하다.

 

 

 

아래처럼 v-else-if / v-else 와 함께 작성도 가능하다

  <div v-if="a">aaaaa</div>
  <div v-else-if="b">bbbb</div>
  <div v-else>모든조건이 만족하지 않은경우</div>

a가 true이면 첫번째 요소가 출력되고

b가 true일 경우 두번째 요소가 출력

둘다 조건이 만족하지 않으면 마지막 요소가 출력된다.