Vue.js에서 v-show 지시문은 CSS 'display' 속성 값을 'none'으로 설정하여 조건이 'false'일 때 요소를 숨깁니다. HTML 속성으로 작성한 후 v-show 태그 표시 여부를 결정하는 조건을 제공해야 합니다.
기본 예제
아래 예제는 v-show 지시문을 사용하여 조건에 따라 <div> 태그를 숨기거나 표시합니다.
<div id="app">
<div v-show="showDiv">This div tag can be hidden</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
showDiv: false
}
}
});
app.mount('#app');
</script>
v-show와 v-if의 차이점
v-show와 v-if의 차이점은 v-if는 조건에 따라 요소를 생성(렌더링)하지만, v-show는 요소가 이미 생성된 경우 가시성만 변경된다는 점입니다.
v-show를 사용하는 것이 객체의 가시성을 전환할 때 브라우저에서 수행하기 더 쉽고, 더 빠른 응답과 더 나은 사용자 경험으로 이어질 수 있기 때문에 더 좋습니다. 하지만 v-if는 v-else-if, v-else와 함께 사용할 수 있습니다.
예제 코드
아래 예제에서는 v-show와 v-if가 두 개의 서로 다른 <div> 요소에 별도로 사용되지만 동일한 Vue 속성을 기반으로 합니다. 예제를 열고 코드를 검사하여 v-show는 <div> 요소를 유지하고 CSS 'display' 속성만 'none'으로 설정하지만, v-if는 실제로 <div> 요소를 삭제하는지 확인할 수 있습니다.
<div id="app">
<div v-show="showDiv">Div tag with v-show</div>
<div v-if="showDiv">Div tag with v-if</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
showDiv: true
}
}
});
app.mount('#app');
</script>
결론
v-show 지시문은 조건부 가시성을 간편하게 구현할 수 있는 강력한 도구입니다. 이 글에서 소개한 예제를 통해 v-show 지시문의 기본 사용법을 익히고, v-if와의 차이점을 이해할 수 있습니다. Vue.js를 사용하여 동적이고 반응형 웹 애플리케이션을 개발해 보세요.