[Vue] Vue(5) v-if 조건문

애플 코딩 vue 강의 공부 내용
시작하기 전에 원룸 이미지를 첨부하고 시작해 보겠습니다.
문법은 html 할 때랑 마찬가지로
<img src=""/>사용하시면 됩니다

<div>
    <img src="./photo/room0.jpg" class="room-image"/>
    <h4>{{room[0]}}</h4>
    <p>xx 만원</p>
    <button @click="신고[0]++">신고</button><span> 신고수 : {{신고[0]}}</span>
  </div>
  <div>
    <img src="./photo/room1.jpg" class="room-image"/>
    <h4>{{room[1]}}</h4>
    <p>xx 만원</p>
    <button @mouseover="신고[1]++">신고</button><span> 신고수 : {{신고[1]}}</span>
  </div>
  <div>
    <img src="./photo/room2.jpg" class="room-image"/>
    <h4>{{room[2]}}</h4>
    <p>xx 만원</p>
    <button @click="신고[2]++">신고</button><span> 신고수 : {{신고[2]}}</span>
  </div>

<style>
 .room-image {
  width: 100%;
  margin-top: 40px;
}
</style>

모달창 생성

이미지를 잘 삽입했다면 원룸 이름을 클릭할 때 해당 원룸의 상세 페이지를 만들어 보겠습니다.

 <div class="black-bg">
    <div class="white-bg">
      <h4>상세페이지</h4>
    </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;
}
</style>

이렇게 상세 페이지는 항상 덮어 씌워서 사용한다고 생각하시고
조건문을 이용해서 보일 때와 안 보일 때는 설정해 주면 되는 겁니다

모달창을 만들기 위해서는 항상
3가지의 step을 생각하면 됩니다

1. 보여주고 싶은 UI 생성

2. true or false로 변수를 생성하고 이벤트 핸들러로 부여

3. 보여주고 싶은 창에 조건문 작성

<div class="black-bg" v-if="show==true">
    <div class="white-bg">
      <h4>상세페이지</h4>
    </div>
  </div>

이제 상세페이지가 열렷으니 닫히는것도 만들어봅시다.

정리🎈

변수로 false라는 데이터를 저장해놓고
원룸 이름을 클릭하면 변수의 내용을 true로 바꾸는 코드 작성
<h4 @click="변수 = true"></h4>
조건문을 사용하여 보여주고 싶은 태그에 v-if="변수==true" 라면 보여주세요라는 코드 작성
잘 열린다면 닫기 버튼 생성 <button> 닫기 </button>
닫기 버튼에도 @click 이벤트 적용하기
<button @click="변수=false"> 닫기 </button>
이렇게 코드를 작성하게 되면 잘 작동합니다.