[vue] UI 및 import, V-if-else

동적인 UI 만드는 법

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

   data(){
   	return{
       모달창열렸니 : false,
       //이렇게 현재상태를 저장
       신고수: [0, 0, 0],
       메뉴들 : ['home','shop','about'],}
   }
   

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

   v-if="조건식"

 <div class="black-bg" v-if="모달창열렸니 == true">
    <div class="white-bg">
      <h4>상세페이지임</h4>
      <p>상세페이지 내용임</p>
    </div>
  </div>

 <h4 @click="모달창열렸니=true"> {{products[0]}}</h4>

그리고 import/ export 관련하여 data값이 너무나 많을 경우 따로 assets 폴더 내에 js파일을 생성하여 data를 따로 작성할 수 있다.
1. export default[{데이터들 쭉 나열}]
예시는 아래와 같다.

export default[{
    id : 4,
    title: "MyeongIl Apartment flat",
    image: "https://codingapple1.github.io/vue/room4.jpg",
    content: "탄천동 아파트 월세, 남향, 역 5분거리, 허위매물아님",
    price: 680000
    },
    {
    id : 5,
    title: "Banziha One Room",
    image: "https://codingapple1.github.io/vue/room5.jpg",
    content: "반지하 원룸입니다. 비올 때 물가끔 새는거 빼면 좋아요",
    price: 370000
  }]

2. 그리고 app.vue에서 import 할 것

import data from './assets/oneroom.js';

data() {
    return {
      원룸들: data,
    }
  },

import하고 data에서 변수지정하여 가져온 아이를 데이터에 넣어줘야한다.

3. 그리고 실제 코드에서 사용

// 1. 데이터변수명 그대로 사용
  <div v-for="(rooms, i) in 원룸들" :key="i">
    <img :src="원룸들[i].image">
    <p>{{원룸들[i].title}}</p>
    <p>{{원룸들[i].price}}</p>
    <p>{{원룸들[i].content}}</p>

  </div>
  
// 2. 작명한 것 이용
  
  <div v-for="(작명, i) in 원룸들" :key="i">
    <img :src="작명.image" >
    <h4> 집이름: {{작명.title}}</h4>
    <p> 가격 : {{작명.price}}원 </p>
    <p> 특징 : {{작명.content}}</p>
  </div>
  
// 3. 하드코딩
  
  <h4> {{원룸들[0].title}}</h4>
  <p> {{원룸들[0].price}}원 </p>

위와 같이 데이터값이 방대할 경우는 저렇게 쓸 수 있다.
(리액트로 치면 useState와 같은 상태관리)

나는 2번 작명한 것으로 했을 때 작명[i].title을 넣었었는데 i를 넣지않아도 된다.

📝 V-if V-else

<div v-if="1 == 1"> 안녕1 </div>
<div v-else> 안녕2 </div> 

if문이 참이면 안녕1이 실행되고, 거짓이면 else 문이 실행된다.

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

if문을 연달아 여러개 쓰고싶은 경우에 사용
여기선 1==2가 맞느냐 아니면 1==3은 맞느냐