모달창 내에 상세페이지 만들기 v-else

  <div v-for="(원룸,i) in 원룸들" :key="i">
    <img class="room-img" :src="원룸.image">
    <h4 @click="모달창열렸니 = true; 누른거 = i">{{ 원룸.title }}</h4>
    <p> {{ 원룸.price }}원</p>
  </div>

 

for문으로 이렇게 데이터를 뿌려줬다. 클릭할 때마다 상세내용이 나오면 좋겠는데 클릭한 컨텐츠가 보이면 좋겠다.

 

export default {
  name: 'App',
  data(){
    return {
      누른거 : 0,

'누른거'라는 state를 만들고

 

클릭하면 '누른거'에 id 값을 넣을 것이다. 그럼 모달창에서는 이렇게 보이면 된다.

 

  <div class="black-bg" v-if="모달창열렸니">
    <div class="white-bg">
      <h4>{{ 원룸들[누른거].title }}</h4>
      <p>{{ 원룸들[누른거].content }}</p>
      <button @click="모달창열렸니 = false">닫기</button>
    </div>
  </div>

 

 

 

  <div v-if="1==2">
    안녕하세요1
  </div>
  <div v-else-if="1==1">
    안녕하세요2
  </div>
  <div v-else>
    안녕하세요3
  </div>

else는 바로 위가 참이 아니면 대신 작동한다.