VueJS에서 컴포넌트 등의 요소를 숨기거나 보여주는 방법으로 v-if를 사용할 수 있습니다. 아래에서 자세히 알아봅니다.

일반적으로 가장 많이 사용되는 방법은 v-if 그리고 v-show를 사용하는 방법입니다.


! v-if 그리고 v-show의 차이점은?이 둘의 공통점은 둘 다 동일한 기능으로 숨기거나 보여준다는 점이지만 기능 구현에 큰 차이점이 있는데 실제 DOM을 그려주느냐의 여부에 따라 차이가 있습니다. v-if는 DOM 영역에 그려주지 않으므로 숨길 수 있으나 v-show는 단지 style 속성을 사용하여 보여주지만 않는다는 차이가 있죠. 이런 이유로 보여주거나 숨기는 액션이 반복된야한다면 v-show를 사용하고 그 외의 경우는 v-if를 사용하는 방법이 성능에 더 좋을 것입니다.




# v-if 사용 예제보기간단한 예제를 만들어보겠습니다. 아래는 스위치를 하나 만들고 이 버튼을 누르면 텍스트가 나타나고 사라지는 동작의 예제입니다.
<script>
data: {
  isStatusOn: false
},
methods: {
  toggleOnOff: function() {
    this.isStatusOn = !this.isStatusOn;
  }
}
...
</script>

버튼과 메시지는 아래와 같이 만들어줍니다. v-if도 아래에 위치합니다.
<div v-if="isStatusOn">Hello Webisfree.com</div>
<button @click="toggleOnOff">Click</button>

이제 버튼을 클릭하면 메시지를 보이고 나타나게됩니다.