v-if modal UI제작

<template>
  <div class="menu">
    <a v-for="(item, i) in menus" :key="i"> {{ item }} </a>
  </div>
  
  <!-- modal popup -->
  <div class="black-bg" v-if="flag ==true">
    <div class="white-bg" >
      <h4>상세페이지</h4>
      <p>상세페이지내용임</p>
      <button @click="flag = false">닫기</button>
    </div>
  </div>
 <!-- -----end-------- -->
  
  <div>
    <img @click="flag = true" src="./assets/room0.jpg" class="room-img"  />
    <p>{{ products[0] }}</p>
    <p>60만원</p>
    <button v-on:click="count[0]++">허위매물신고</button>
    <span>신고수 : {{ count[0] }}</span>
  </div>

  <div>
    <img src="./assets/room1.jpg" class="room-img" @click="flag = true" />
    <p>{{ products[1] }}</p>
    <p>60만원</p>
    <button @click="count[1]++">허위매물신고</button>
    <span>신고수 : {{ count[1] }}</span>
  </div>

  <div>
    <img src="./assets/room2.jpg" @click="flag = true" class="room-img" />
    <p>{{ products[2] }}</p>
    <p>60만원</p>
    <button v-on:click="count[2]++">허위매물신고</button>
    <span>신고수 : {{ count[2] }}</span>
  </div>

</template>



<script>
export default {
  name: "App",

  data() {
    return {
      flag : false,
      count: [0, 0, 0],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
      menus: ["HOME", "Products", "Help"],
    };
  },
  methods: {
    increse() {
      this.count++;
    },
  },

  components: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

/* modal popup */

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

/* modal popup end */




.menu {
  background-color: cadetblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  padding: 10px;
  color: aliceblue;
}

.room-img {
  width: 300px;
  height: 200px;
  margin-top: 20px;
}
</style>

 

 

ui 만들떄 공통점

미리 만들어놓고 (HTML CSS 기능JS)

특정 조건이 되면 (v-if 사용 if 특정조건일때만 표현  (v-on:click 등등 event 이되면 특정 값을 바꿔주는것으로 조건형성)

보여준다. 

 

이게끝임