[Vue] v-if와 모달창 만들기

이미지 넣기

상대경로 이미지 넣을 때는 src 폴더 아래 이미지 파일을 저장해두고

 <div>

    <img src="./assets/room0.jpg" class="room-img">

    <h4>{{ products[0] }}</h4>

    <p>50 만원</p>

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

  </div>

  <div>

--> ./ (현재 경로라는 의미)로 시작하는 경로를 적어준다.

 

모달창 만들기

동적인 UI 만드는 법 

0. HTML CSS로 디자인 하기
1. UI의 현재 상태를 데이터로 저장하기
2. 데이터에 따라 UI가 어떻게 보일지 작성하기

차례대로 해보자.

0. HTML CSS로 디자인 하기

  <div class="black-bg">

    <div class="white-bg">

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

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

    </div>

  </div>

<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-top: 40px;

}

</style>

 

1. UI의 현재 상태를 데이터로 저장하기

  data() {

    return {

      modalOpen : false,

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

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

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

    }

  },

--> modalOpen 이라는 데이터를 만든다. (false를 기본으로 만들었음)

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

  <div class="black-bg" v-if="modalOpen == true">

    <div class="white-bg">

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

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

    </div>

  </div>

--> v-if 라는 조건식 문법을 사용하여 modalOpen이 true면 해당 HTML이 보이게 조건식을 설정한다.

그리고

  <div>

    <img src="./assets/room0.jpg" class="room-img">

    <h4 @click="modalOpen = true">{{ products[0] }}</h4>

    <p>50 만원</p>

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

  </div>

--> products[0]을 클릭했을 때 modalOpen이 true로 바뀌게 설정한다.

결과물

--> '역삼동원룸' 제목을 클릭하면

--> 이렇게 모달창이 뜨게된다.

 

출처 : 코딩애플