0. 동적 UI?

간단하게 누르면 동작하는 UI

---

1. 동적 UI를 만드는 순서

• 현재 HTML UI의 상태를 저장
• 그 상태에 따라 UI 노출 여부를 Vue 문법으로 작성

  이 순서만 알면 모달창, 탭, 서브메뉴 등을 만들 수 있다.

---

2. 모달창

위의 순서대로 모달창을 만들어보자

2.0 준비

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

# CSS
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;
} 

2.1 HTML의 상태를 데이터로 저장

data(){
	return {
    	modal : true,
    }
}

• true(노출)/false(숨김)나 0/1이나 뭘 쓸지는 본인의 선택

2.2 UI의 노출 여부를 Vue문법으로 작성

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

v-if를 사용해서 modal이 true일 때, 상세 페이지를 노출시킨다고 했으니 세팅은 완료됐다.

이제는 modal을 true나 false로 바꿔주는 함수를 적용한다.

카운터 전체 코드

<template>
  <div v-for="(i, j) in users" :key="i">
    <h4>{{i}}</h4>
    <button @click="ben(j)">클릭</button> <span>클릭수 : {{count[j]}}</span>
    <button @click="modalChange(j)">
      <div class="black-bg" v-if="modal[j] == true">
        <div class="white-bg">
          <h4>상세페이지</h4>
          <p>{{userInfo[j]}}세</p>
        </div>
      </div>
    </button>
  </div>
  
</template>

<script>
export default {
  name: 'App',
  data(){
    return { 
      count: [0, 0, 0],
      users : ['user1', 'user2', 'user3'],
      userInfo : [24, 31, 29],
      modal : [false, false, false],
    }
  },
  methods :{
    ben(i){
      this.count[i] +=1;
    },
    modalChange(i){
      if (this.modal[i] == false){
        this.modal[i] = true;
      }else{
        this.modal[i] = false;
      }
    }
  }
  </script>

---

참고

• 코딩애플