[ VueJS 입문 ] 조건부 렌더링 v-for / v-for vs v-show

• 조건부 랜더링 v-if, v-else - https://jsfiddle.net/sunghun/th2m9ws7/39/

샘플을 보면 Vue 인스턴스내 data에 dog라는 변수에 true를 할당하였고, 현재 dog가 true라면 false를 false라면 true로 할당하는 버튼을 만들었다. 그리고 두 <p>태그에는 v-if="dog"와 v-else 디렉티브를 설정하였다.

v-if="조건상태"

그렇게 하여 처음 실행시에는 dog=true 이기 때문에 '반려동물은 강아지지!' 가 떠있고 버튼을 누르게 되면 '무슨소리, 고양이지!' 로 <p>태그가 서로 번갈아가며 조건이 만족된 내용만 노출이 되고 있다.

 

• v-if를 갖는 template를 활용한 조건부 그룹 - https://jsfiddle.net/sunghun/th2m9ws7/40/

샘플을 보면 template 태그를 이용해 조건을 걸었고 실행시켜보면 조건을 걸어둔 태그뿐 아니라 그 하위에 있는 태그들까지 영향을 미치고 있다.

 

• v-if VS v-show

Vue는 v-if 디렉티브와 비슷한 역할을 하는 v-show라는 디렉티브를 제공한다. 마찬가지로 조건의 값에 따라 보이고 안보이고 결과값이 달라진다.

v-show="조건상태"

이 둘의 차이는 다음과 같다.

https://jsfiddle.net/sunghun/th2m9ws7/42/

소스를 보면 당연히 두 문장 다 안보이는것이 맞다. 그렇다면 개발자도구를 이용하여 해당 문서를 보자. 그러면 소스코드상에서는 v-if를 사용한 <p>태그는 아에 소스코드 상에서도 확인 할 수 없고 v-show로 잡은 <p>태그만 감추어져있는걸 볼 수 있다. 즉 css의 display:none으로만 처리를 하고 싶다면 v-show를, 아에 코드를 없애고 싶다면 v-if를 사용하면 된다.