Vue

Vue img 모달창

끈끈 2023. 5. 6. 22:57

 

이미지 넣는 법:

<img src="./assets/room0.jpg">

<img :src="data.image">

 

절대경로는 그냥 넣기

 

src에 있는 거 가져올 때 경로는 ./ 부터

 

 

모달창 만들기

 

동적인 UI 만드는 법

  1. UI의 디자인부터 하기
  2. UI의 현재 상태를 데이터로 만들기
  3. 데이터에 따라 UI가 어떻게 보일지 작성하기

 

App.vue:

<template>
    <div class="black-bg" v-if="모달창오픈">
        <div class="white-bg">
            <h4>상세페이지</h4>
            <p>상세페이지 내용</p>
            <button @click="모달창오픈 = false">닫기</button>
        </div>
    </div>

 

<script>

export default {
  name: 'App',
  data(){
    return {
      모달창오픈 : true,
       
    }
  },

 

v-if="조건식"
>>> 조건식이 참일 때만 HTML을 보여줌

 

데이터 저장 공간을 리액트에서는 state라고도 부른다

 

UI의 현재 상태를 저장하는 곳이기도 하므로!

 

 

참고

 

저작자표시 비영리 변경금지