9. v-if 와 v-show

v-if 활용

실행 결과

 

클릭 결과

한 번 더 클릭 결과

 

또 다른 예제

v-if 활용

실행 결과

hide 버튼 클릭 결과

v-if 는 <div></div> 태그 안에 내용이 없어져 화면에 안보이게됨.

 

 

v-show 활용

 

실행 결과

 

hide 버튼 클릭 결과

 

v-show는 <div style="display: none;"> 속성이 생겨서 안보이게 됨.

 

v-if 랑 v-show 결과는 같네.

 

 

차이점에 대해 자세히 공부하려면 ㄱㄱ

www.kr.vuejs.org/v2/guide/conditional.html

v-if 와 v-show

자주 바꾼다면 v-show ㄱㄱ