동적 UI (모달창)

0.UI에 대한 디자인을 미리 작성

 

<div class="black-bg" v-if="pop_state==true"> 
  <div class="white-bg">
    <h4>상세내역</h4>
    <p>상세페이지 내용</p>
    <button @click="pop_state=false">닫기</button>

  </div>
</div>
## template 내 html정보 작성

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;
}
## style 내 css정보 작성

1.UI 상태(state)를 데이터로 저장 (0/1 or true/false)

 data() {
    return{
    ##
   
      ##
      pop_state: false,
    }
  },

 

2. 상태데이터 값에 따라 보이는 UI가 어떻게 보일 지 작성

 

<div class="black-bg" v-if="pop_state==true"> 
  <div class="white-bg">
    <h4>상세내역</h4>
    <p>상세페이지 내용</p>    
    <button @click="pop_state=false">닫기</button>

  </div>
</div>
## v-if문을 통해 state 값에 따라 표시여부를 결정

    <h4 :style = "스타일" @click="pop_state=true"> {{ products[0] }}</h4>
##@click을 통해 클릭 시 true가 되면 상기 v-if조건을 충족