본문 바로가기
개발/vue.js

VueJS - 10. v-if / v-for vs v-show

by devsu 2020. 7. 12.

아래 글을 따라하며 VueJS에 적응하기

 

https://medium.com/@hozacho/%EB%A7%A8%EB%95%85%EC%97%90vuejs-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EB%A0%8C%EB%8D%94%EB%A7%81-v-for-v-for-vs-v-show-bbc7744fb512

 

[맨땅에VueJS] 조건부 렌더링 v-for / v-for vs v-show

여기 "반려동물은 강아지지!" 라는 의견과 "무슨소리, 고양이지!” 라는 두 가지 상반된 의견이 있습니다. 이 두 의견은 동시에 주장할 수 없는 의견이겠죠? 이럴 때는 두 가지 p 태그 중 조건에 ��

medium.com

요약

<조건에 따라 다르게 렌더링 - v-if, v-else>

 

v-if 디렉티브는 하나의 태그에만 동작하지 않고 해당 태그의 하위 태그에도 동작한다.(template 태그를 활용)

 

조건에 따라 아예 코드를 지우고 싶다면 v-if 디렉티브를, 코드는 있지만 스타일로 display: none 처리를 하고 싶다면 v-show를 사용