[Vue] v-if, 데이터 상태변경(모달)

v-if=”조건식”

안에 있는 조건식이 참일때만 보여진다.

ui 만드는 법칙

1. 필요한 ui를 미리 만들어놓는다.
2. ui의 현재 상태를 데이터로 저장해놓는다.
3. 데이터에 의해서 모달창이 어떻게 보일지 작성한다.

---

모달창 스위치(데이터)를 만들어 놓고, 스위치를 변경하는 방법으로 기능 개발을 한다.
모달 v-if="모달창열렸니==1" 속성
클릭이벤트 @click="모달창열렸니=1"
데이터 모달창열렸니: 0

<template>
  <div class="black-bg" v-if="모달창열렸니==1">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p>
      <button @click="모달창열렸니=0">닫기</button>
    </div>
  </div>

  <div class="menu">
    <a v-for="(a,i) in 메뉴들" :key="i">{{a}}</a>
  </div>

  <div v-for="(a,i) in products" :key="i">
    <img :src="require(`@/assets/room${i}.jpg`)" class="room-img">
    <h4 @click="모달창열렸니=1">{{ a }}</h4>
    <p>40 만원</p>
    <button @click="신고수[i]++">허위매물신고</button> <span>신고수: {{ 신고수[i] }}</span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      메뉴들: ['Home', 'Shop', 'About'],
      products: ['역삼동원룸', '천호동원룸', '마포구원룸'],
      신고수: [0, 0, 0],
      모달창열렸니: 0,  // 0:닫힘, 1:열림
    }
  },
  methods: {
  },
  components: {}
}
</script>

<style>
body {
  margin: 0;
}
div {
  box-sizing: border-box;
}

/* modal */
.black-bg {
  position: fixed;
  padding: 20px;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0, 0.5);
}
.white-bg {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}
</style>

데이터 저장공간을 react에서는 state(상태)라고 부른다.
Vue에서는 data() { return { } }
ui 의 상태를 저장하는 공간!