Vuejs 2 . v-if 와 v-show

1. v-if

v-if 속성은 이름처럼 vue에서의 조건 속성입니다.

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

 

아래의 예제는 버튼을 클릭하면 True가 False로 바뀌는 예제입니다.

 

먼저 버튼에 클릭이벤트를 넣어주고 메소드에 함수를 설정합니다.

this.show = !this.show;  --> 토글 효과, 버튼을 클릭할때마다 true와  false가 교차됨

this.show = false;  --> 버튼을 클릭하면 false되고 버튼을 다시 클릭해도 이미 false이기 때문에 변화가 없음

 

데이터에 show를 true로 설정했으므로 처음 웹 브라우저에서는 <div>3개가 모두 보일것입니다.

버튼을 누르면 false로 바뀌면서 v-if는 사라지고 v-else가 보이게 됩니다.

 

 

2. v-show

이번에는 v-show를 이용하여 버튼을 클릭하면 True가 보이는 예제입니다.

 

버튼에 클릭이벤트를 만들어주고 메소드에 토글함수를 설정하였습니다.

데이터에 show가 false로 되어있으므로 처음 브라우저를 열었을때에는 글이 보이지 않을것입니다.

그러다 버튼을 클릭하면 클릭이벤트가 적용되어 글씨가 나타나게됩니다.

 

 

 

 

3. v-if 와 v-show의 차이점

v-if 와 v-show의 차이점은 false일때 렌더링이 되냐 안되냐의 차이입니다.

v-if는 렌더링이 안됩니다. 결과창을 보면 false가 되었을때 <div>자체가 아예 사라집니다.

반면 v-show는 false일때도 렌더링은 됩니다. 하지만 style에 display:none이 붙으면서 브라우저에 보이지않는것 뿐입니다.

따라서 일반적으로 v-if는 토글 비용이 높고 v-show는 초기 렌더링 비용이 더 높습니다. 자주 바꾸기를 원한다면 v-show를, 런타임 시 조건이 바뀌지 않으면 v-if를 권장합니다.

 

 

 

 

 

**위의 정리 내용은 유튜버 코지코더님의 Vue.js강의를 보고 정리한 내용입니다.

유튜브를 보면서 정리된 글을 보면 더 좋을것같아요!