v-if 와 모달창 만들기 (Vue에서 동적인 UI 만드는 법)

이미지는 src 밑에 assets에 넣는다

 

 

<img>에 넣는법

src에 있는 이미지 사져올때 경로는 ./부터 쓴다

 <img src="./assets/room0.jpg">

 

 

 

---

모달창=

탭,햄버거메뉴,서브메뉴,툴팁,이미지슬라이드....

 

 

동적인UI만드는법착:

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

e

export default {

  name: 'App',

  data(){ //여기가 데이터 보관함

    return {

      모달창열림 : false,

      이미지 : ["http://localhost:8081/img/room0.e2d4696b.jpg",'http://localhost:8081/img/room1.0d438c5a.jpg','http://localhost:8081/img/room2.d330e978.jpg'],

      신고수 : [0,0,0],

      메뉴들 : ['Home','Shop','About'],

      products : ['역삼동원룸','천호동원룸','마포구원룸'],

      products2 : [50,'가격은아무거나',100],

    }

  },

여기서 모달창 열림을 false로 생성했다 숫자 1로 해도되구 내 맘대로하면된다

 

 

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

 

  <div class="black-bg" v-if="모달창열림 == true">

    <div class="white-bg">

      <h4>상세페이지임</h4>

      <p>상세페이지 내용임</p>

      <button @click="모달창열림 = false">닫기</button>

    </div>

  </div>

v-if="조건식"

 

  <div v-for="(i,v) in products" :key="i">

    <img :src="이미지[v]" class="room-img">

    <h4 @click="모달창열림= true"> {{i}}</h4>

    <p>{{products2[v]}} 만원</p> <!--데이터 보관함에 자료 이름으로 불러온다 {price1 : 60}-->

    <button @click="increase(v)">허위매물신고</button><span> {{신고수[v]}}</span>

  </div>

 

 

전체코드

<template>

  <div class="black-bg" v-if="모달창열림 == true">

    <div class="white-bg">

      <h4>상세페이지임</h4>

      <p>상세페이지 내용임</p>

      <button @click="모달창열림 = false">닫기</button>

    </div>

  </div>

  <div class="menu">

    <a v-for="작명 in 메뉴들" :key="작명" >{{ 작명 }}</a>    

    <a v-for="작명 in 3" :key="작명" >{{ 작명 }}</a>    

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

  </div>

  <div v-for="(i,v) in products" :key="i">

    <img :src="이미지[v]" class="room-img">

    <h4 @click="모달창열림= true"> {{i}}</h4>

    <p>{{products2[v]}} 만원</p> <!--데이터 보관함에 자료 이름으로 불러온다 {price1 : 60}-->

    <button @click="increase(v)">허위매물신고</button><span> {{신고수[v]}}</span>

  </div>

 

</template>

<script>

export default {

  name: 'App',

  data(){ //여기가 데이터 보관함

    return {

      모달창열림 : false,

      이미지 : ["http://localhost:8081/img/room0.e2d4696b.jpg",'http://localhost:8081/img/room1.0d438c5a.jpg','http://localhost:8081/img/room2.d330e978.jpg'],

      신고수 : [0,0,0],

      메뉴들 : ['Home','Shop','About'],

      products : ['역삼동원룸','천호동원룸','마포구원룸'],

      products2 : [50,'가격은아무거나',100],

    }

  },

  methods : {

    increase(v){

      //신고수 += 1; 함수안에서 데이터를 사용할떈 반드시 this.데이터명 을 써야한다.이것은 오류

      this.신고수[v] += 1;

    }

  },

  components: {

  }

}

</script>

<style>

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;

}

/* 모달창디자인 */

.room-img{

  width : 100%;

  margin: 40px;

}

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

.menu{

  background : darkslateblue;

  padding: 15px;

  border-radius : 5px;

}

.menu a{

  color: white;

  padding: 10px;  

}

</style>

 

Vue에서 Data를

React에서는 state(상태)라고 부른다

UI의 상태를 저장하는 공간이기도 해서 그렇다.