Vue) 05. v-if로 모달창 구현..

시작하기 전)

모달창은 없었다가 생기는 것이 아닌, 최초부터 존재했지만 숨겨져 있고 그것을 보여주는 것이다.

따라서 나는 데이터로 modalOpen이라는 초기값이 false인 변수를 선언하고, 이 변수가 true면 보여주는 형식으로 모달창을 만들었다.

Data 소스코드)

data() {
  return {
    products,
    menus: ["Home", "Products", "About"],
    
    // 모달을 숨겨 주는 변수선언
    modalOpen: false,
  };
},

• 초깃값이 false인 modalOpen이라는 변수를 선언

HTML 소스코드)

<!-- 모달창 -->
<div class="black-bg" v-if="modalOpen === true">
  <div class="white-bg">
    <h3>상품 제목입니다.</h3>
    <p>상품 설명입니다.</p>
    <button v-on:click="modalOpen = false" class="modal-exit-btn">
      닫기
    </button>
  </div>
</div>

• v-if="[조건]"의 문법으로 간단하게 modalOpen이 true면 웹상에서 보이게 조건을 줄 수 있다.

<h4 v-on:click="modalOpen = true" class="product-name">{{ el.title }}</h4>

• 리액트의 setState()따위는 필요 없이 간단하게 상품명을 클릭 할 시, click이벤트로 modalOpen 값을 true로 간단하게 바꿔주어 모달창이 보이게 만들었다.

  🙋🏻‍♂️ v-on:은 @로 생략이 가능하다!
  @click="modalOpen = true"

Style 소스코드)

.black-bg {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.432);
  position: fixed;
  padding: 20px;
}

.white-bg {
  width: 100%;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
}

.modal-exit-btn {
  margin-top: 30px;
}

.modal-exit-btn:hover {
  cursor: pointer;
}

결과)