모달창 만들기

동적인 UI 만드는 법
1. HTML CSS 디자인
2. UI의 현재 상태를 데이터로 저장해둠
3. 데이터에 따라 UI가 어떻게 보일지 작성

Step 1

HTML CSS 디자인

HTML

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

CSS

.black-bg {
  width: 100%;
  height: 100%;
  background-color: #000000cc;
  position: fixed;
  padding: 20px;
  top: 0;
  left: 0;
}

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

Step 2

• UI의 현재 상태를 데이터로 저장해둠
• "그 UI가 지금 어떻게 보여야 함?"

<script>
export default {
  name: 'App',
  data(){// 데이터 보관통
    return {
      modalOpen: true, //모달창 열렸니
    }
  }
}
</script>

Step 3

• 데이터에 따라 UI가 어떻게 보일지 작성
• modalOpen가 true면 이거 보여줄 것임

v-if

• 조건식이 참일 때만 HTML 보여줌

<div v-if="조건식">
<div v-if="1 == 1">

코드

• modalOpen가 true일 경우만 보임

<template>
  <!-- 누르면 modalOpen이 true로 바뀌면서 팝업의 조건식이 변경됨 -->
  <button type="button" v-on:click="modalOpen = true">누르면 팝업</button>

  <!-- 팝업 -->
  <div class="black-bg" v-if="modalOpen">//조건식
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p>
      <button type="button" v-on:click="modalOpen = false">닫기</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){// 데이터 보관통
    return {
      modalOpen: false, //모달창 열렸니
    }
  }
}
</script>

modalOpen가 false

modalOpen가 true
닫기 누르면 닫힘