[VUE] v-if 와 v-show

💡 v-if

• 조건에 따라 블록을 렌더링 하기 위해 사용된다.
• 블록은 디렉티브(v-if)의 표현식이  true  값을 반환할 때만 렌더링된다.

<div v-if="hello">Hello World!<div>

• v-else와 함께 "else 블록"을 추가하는 것도 가능하다.

<div v-if="hello">Hello World!</div>
<div v-else>Oh no 😢</div>

 

💡 v-show

•  v-if  와 사용법이 거의 동일하다.
• ok의 값이 참일 때 화면에 표시된다.

<div v-show="ok">Hello World!</div>

 

📍 v-if 와 v-show의 차이점

• v-show가 있는 엘리먼트는 항상 렌더링이 되고 DOM에 남아있다.
• v-show는 단순히 css의 display 속성만 변경된다.