[Vue.js] V-if와 V-show

---

v-if, v-show

- 조건부 렌더싱 시 사용하는 디렉티브

 

<h1 v-if="isTrue">True</h1>
<h1 v-else>False</h1>

isTrue 가 참 값을 가지면 True가 렌더링 되고,

그게 아니면 False가 렌더링 된다.

 

v-show

<h1 v-show="isTrue">True<h1>

마찬가지로 isTrue가 참 값이면 True가 렌더링 된다.

 

그러면 여기서 둘의 차이가 뭘까???

v-if는 조건에 따라 컴포넌트가 실제로 생성되거나, 제거된다.

따라서 조건이 참이면 컴포넌트가 생성되고, 거짓이면 제거가 된다.

 

반면 v-show는 값이 거짓이면 display: none이 되어서 보이지만 않게되는 것!!!

display: none