v-if와 동적ui모달창 만들기

모달창은 항상 모달창 ui를 미리 만들어놓고, 숨겼다 보여줬다만 해주면된다.

그래서 먼저, 모달창 ui를 만들어보자.

<div class="black-bg">
    <div class="white-bg">
      <h4>상세피이지</h4>
      <p>상세페이지 내용</p>
    </div>
  </div>

body {
  margin : 0;
}
div {
  box-sizing: border-box;
}
.black-bg {
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  position: fixed; padding: 20px;
}
.white-bg {
  width: 100%; background: white;
  border-radius: 8px;
  padding: 20px;
}

이런 식으로, 모달창을 만들어주고,

이제, 1. ui 현재상태를 데이터로 저장을 해주고, 2. 데이터에 따라 ui가 어떻게 보일지 작성해주면 된다.

data() {//데이터 보관함
    return {
      모달창열렸니 : false,
      신고수 : [0,0,0],
      메뉴들 : ['Home','Shop', 'About'],
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      prices : [50, 60, 70]
    }
  },

이렇게, 모달창열렸니 란 데이터를 false / true로 해놓고,

v-if="조건식"을 사용해서 v-if는 안에 있는 조건식이 참일 때만 해당 html을 보여주므로

<div class="black-bg" v-if="모달창열렸니 == true">
    <div class="white-bg">
      <h4>상세피이지</h4>
      <p>상세페이지 내용</p>
    </div>
  </div>

이렇게, 열 html에 v-if를 달아주면 된다. 그래서 역삼동원룸이란 글씨를 누르면 상세페이지를 보여주게 하려면

<h4 @click="모달창열렸니 = true">{{products[0]}}</h4>

이렇게, 데이터 값만 변경해주면 된다.

 

마지막으로, v-if는 v-else와 같이 쓸 수 있는데,

<div v-if="1==1">
	안녕하세요
</div>

<div v-else-if="1==3">
	안녕하세요2
</div>

<div v-else>
	안녕하세요3
</div>

이런 식으로, if가 참이면 if를 if가 거짓이면 v-else를 띄우게 되며, v-else-if를 쓰면 조건을 또 사용할 수 있다.