v-show vs v-if

Vue에서 정의된 show data에 따라서 박스를 토글시키는 예제이다.

 

 

v-show와 v-if의 값으로 오는 것이 true일 경우에는 동일하게 html 태그가 존재한다.

 

false일 경우에는 화면에는 둘다 보이지 않게 될 것이다.

하지만 false일 때  html 코드가 다르다. 아래 코드를 보면 하나는 아예 코드가 표시되지 않는다. 바로 v-if가 화면에서도 사라지면서 코드 상에서도 사라진다. 따라서 토글이 자주 사용된다면 v-if보다는 v-show가 나은 선택이다. 반대로 초기 렌더링에는 필요 없다가 특정 조건 이후에 계속 살아있게 하려면 v-show가 좋을 것이다.