소개

엔지니어 인턴을하고있는 대학 2 학년의 츠키 야마입니다.
이 기사는 vue와 비슷한 디렉티브 v-if와 v-show의 차이점에 대해 나름대로 정리해 보았습니다.

두 지시문 모두 공통

두 지시문 모두에 공통되는 것은 둘 다 조건부 렌더링이 가능하다는 것입니다.
HTML 태그에 붙이는 것으로, 그 요소는 어느 조건에 true 의 경우만 표시되게 됩니다

v-if 유스 케이스

sample.vue

<div id="app">
  <div v-if="条件">
    // この要素の中は条件がtrueなら表示
  </div>
</div>

v-show 유스 케이스

sample.vue

<div id="app">
  <div v-show="条件">
    // この要素の中は条件がtrueなら表示
  </div>
</div>

그리고 여기까지 차이가없는 것 같습니다.

v-if의 특징

v-if 의 큰 특징은 false 의 때 「HTML로부터 요소 마다 삭제되어 버린다」점입니다.

sample.vue

<div id="app">
  <p v-if="true">条件はtrueです</p>
  <p v-if="false">条件はfalseです</p>
</div>

실제로 위의 코드를 확인해 보았습니다.


그러면, 조건이 true 의 때는 문제 없습니다만, 코드에서는 존재하는 조건이 false 의 코드가 <!----> 라고 코멘트 아웃되어 요소 마다 지워집니다

다른 v-if 의 특징이 false 의 경우, 다른 것을 표시시킬 수가 있습니다

sample.vue

<div id="app">
  <div v-if="条件1">
    // この要素の中は条件1がtrueなら表示
  </div>
  <div v-else-if="条件2">
    // この要素の中は条件2がtrueなら表示
  </div>
  <div v-else>
    //  どちらでもない時表示されます
  </div>
</div>

이와 같이 v-else-if 이나 v-else

false의 특징

한편, v-if 는, v-show 의 때 「CSS 스타일의 v-show 로 보이지 않게 하는 것만」이므로, HTML 요소로서는 계속 존재합니다

sample.vue

<div id="app">
  <p v-show="true">条件はtrueです</p>
  <p v-show="false">条件はfalseです</p>
</div>

실제로 위의 코드를 확인해 보았습니다.



그러면 이번에는 false와 요소가 남아 있습니다.

또, display: none 의 또 다른 차이는, <p style="display: none;">条件はfalseです</p> 와는 연동하지 않기 때문에 v-show 의 때에 다른 것을 표시시킬 수 없습니다.

이것들은 v-else와 false의 주요 차이점입니다.

각각의 구분

각각의 특징은 알았으므로 어떤 경우에 구분할지 정리하면

v-if의 경우

v-if는 다시 표시할 때마다 요소가 다시 만들어지므로
전환 빈도가 적은 경우
v-else와 연동하기 때문에
false일 때 다른 것을 표시하게 하는 경우

v-show의 경우

v-show는 HTML 요소로 계속 존재하기 때문에
전환 빈도가 많은 경우
v-else와 연동하지 않음
false일 때 다른 것을 표시하지 않는 경우

입니다

마지막으로

이번은 v-if v-show의 차이에 대해 썼습니다
Vue는 공부 중이므로이 기사에서 잘못된 점 등이 있으면 댓글을 달 수 있으면 고맙습니다.