[Vue.js] Vue에서 v-show 디렉티브 사용법

<template>
  <div>
    <!-- 첫 번째 예제: v-show를 사용하여 버튼을 클릭할 때 메시지 표시 여부를 전환 -->
    <button @click="toggleMessage">메시지 보이기/숨기기</button>
    <p v-show="showMessage">이 메시지는 v-show로 표시됩니다.</p>

    <!-- 두 번째 예제: v-show를 사용하여 사용자 로그인 상태를 표시 -->
    <div v-show="isLoggedIn">
      <p>로그인되었습니다.</p>
      <button @click="logout">로그아웃</button>
    </div>

    <!-- 세 번째 예제: v-show를 사용하여 조건에 따라 이미지 표시 -->
    <img src="sunny.jpg" v-show="isSunny" alt="맑은 날씨" />
    <img src="cloudy.jpg" v-show="isCloudy" alt="흐린 날씨" />
    <img src="rainy.jpg" v-show="isRainy" alt="비 오는 날씨" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true, // 메시지를 표시할지 여부를 제어하는 데이터
      isLoggedIn: true, // 사용자의 로그인 상태를 나타내는 데이터
      isSunny: true, // 날씨에 따라 이미지를 표시할지 여부를 나타내는 데이터
      isCloudy: false,
      isRainy: false
    };
  },
  methods: {
    toggleMessage() {
      this.showMessage = !this.showMessage;
    },
    logout() {
      this.isLoggedIn = false;
    }
  }
};
</script>

<style scoped>
/* 여기에 컴포넌트에만 적용될 스타일을 작성할 수 있습니다. */
</style>

Vue에서 v-show 디렉티브를 사용하여 엘리먼트를 조건부로 표시하는 방법을 알아봅시다.

위 예제는 Vue 컴포넌트에서 v-show 디렉티브를 사용하여 다양한 상황에 따라 엘리먼트를 표시하는 방법을 보여줍니다.

첫 번째 예제에서는 버튼을 클릭하면 메시지가 표시되거나 숨겨지는 기능을 구현합니다. showMessage 변수의 값에 따라 메시지가 표시됩니다.

두 번째 예제에서는 사용자의 로그인 상태에 따라 로그인 상태 메시지와 로그아웃 버튼이 표시됩니다. isLoggedIn 변수의 값에 따라 메시지가 표시됩니다.

세 번째 예제에서는 날씨에 따라 다른 이미지가 표시됩니다. 각 날씨 조건에 따라 isSunny, isCloudy, isRainy 변수의 값이 변경되어 이미지가 표시됩니다.

이렇게 함으로써 Vue에서 v-show 디렉티브를 사용하여 엘리먼트를 조건부로 표시하는 방법을 익힐 수 있습니다.