이미지 넣는 법:
<img src="./assets/room0.jpg">
<img :src="data.image">
절대경로는 그냥 넣기
src에 있는 거 가져올 때 경로는 ./ 부터
모달창 만들기
동적인 UI 만드는 법
- UI의 디자인부터 하기
- UI의 현재 상태를 데이터로 만들기
- 데이터에 따라 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의 현재 상태를 저장하는 곳이기도 하므로!
참고
'Vue' 카테고리의 다른 글
| axios DELETE data 속성 사용 (1) | 2023.06.14 |
|---|---|
| Vue import export (4) | 2023.05.06 |
| Vue click 이벤트핸들러 (2) | 2023.05.04 |
| Vue 반복문 v-for (3) | 2023.05.03 |
| Vue (await import('vue')).defineComponent() (1) | 2023.05.03 |