[vue3] 모달창

동적인 UI 만드는 법

1. UI의 현재 상태를 데이터로 저장해둠 

    모달창이 현재 상태 열렸는지, 닫혔는지

    탭이 보일지 (햄버거 메뉴)

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

 

v-if="조건식"

조건식이 참일경우에면 HTML을 보여준다

 

3. 현재 상태를 변경할수 있는 스위치(함수)를 만든다

 

 

<template>
  <div class="black-bg" v-if="isOpen == true">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>설명설명설명</p>
    </div>
  </div>

  <div >
    <h4 @click="openModal">상품1</h4>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      isOpen: false
    }
  },
  methods : {
    openModal() {
      this.isOpen = true
    }
  },
  components: {
  }
}
</script>