v-if와 v-show는 Vue.JS에서 조건부 렌더링을 위해 사용된다.
v-if
<div v-if="true">True</div>
<div v-if="false">False</div>v-if 는 조건에 해당하지 않다면 렌더링을 하지 않는다.
위의 코드에서는 False는 렌더링 되지 않는다.
<div v-if="false">True</div>
<div v-else>False</div>v-else는 v-if와 함께 사용될 수 있다.
앞의 조건이 성립되지 않는다면 else 조건이 렌더링된다.
v-show
<div v-show="true">True</div>
<div v-show="false">False</div>v-show는 v-if와 결과는 같지만 동작이 다르다.
위의 코드는 앞선 v-if 코드와 마찬가지로 True만 화면에 표시되고 False는 표시되지 않는다.
하지만 v-if는 조건에 해당하지 않으면 아예 렌더링을 하지 않지만, v-show는 렌더링은 하되, display: none처리를 한다는 차이가 있다.
어느걸 사용해야 할까?
state 에 따라 보여졌다 안보여졌다하는 빈도가 많다면, v-show 를 이용하는 방법을 추천한다. v-if 의 경우 태그를 그렸다 지웠다 해야되기 때문에 브라우저가 많은 부담을 느낀다. 하지만 이런 경우를 제외한다면 v-if 를 이용하는 것이 좋다.
