코딩애플 Vue3 직방, 인스타그램 웹앱 -- 5 모달창

# 이미지 동적 생성.........for문으로 돌리기는 숙제로 했는데 여기 이미지 추가가 있었음...

이미지 경로를 동적으로 생성해야하는데....잘안되어서 ChatGPT도움을 받아 작성함..ㅋㅋ

<div v-for="(a,i) in products" :key="i" :style="inStyle">
    <img :src="require(`./assets/roomImages/room${i}.jpg`)" class="img_room">
    <h4 :style="style" @click="모달창열렸니 =true">{{ i+1}}. {{ products[i] }}</h4>
    <p > {{ price[i] }} 만원</p>
    <button @click="increase2(i)">허위매물신고</button>&nbsp;<span>신고수 : {{ 신고수[i] }}</span>
    <button @click="increase">함수연습</button>
  </div>
</div>

Vue에서 require 함수를 사용하면 동적으로 경로를 생성하고 이미지를 로드할 수 있다.

이렇게 잘 나옴.....for문을 통해 이미지 경로 만들기!!

추가로 vue의 기본 폴더는 assets임..src에 있는거 가져올 때 경로는 ./부터 시작해야한다...

그냥 문법이 그러니깐 외어야함.ㅋㅋ

 

# v-if 조건문에 관련.........조건문을 통한 모달창 on/off 진행하기

1. 역삼동 원룸을 클릭하면 모달창이 나오는 것임.

1차. 모달창 UI를 만듬....간단함...

data에 변수선언후 값을 줌.

v-if를 통해서 모달창열렸니라는 변수가 true일경우에만 활성화시키는 것

그럼 제목줄에 클릭기능을 선언해서 값을 변경해줌..

모달창에 닫기 버튼에는 false값을 선언 클릭기능을 넣음.

 

간단하게 on/off가 됨.....이렇게 보니깐 너무 간단하다..ㅋㅋ