<template>
<div>
<div class="flex">
<div v-for="item in menus">{{ item }}</div>
</div>
<!-- index 사용하려면 괄호로 -->
<ul>
<li v-for="(item, index) in products">
<h4 :style="red">{{ index }} 번</h4>
<!-- <div @click="modal = true">{{ item.title }}</div> -->
<div @click="onPopup(item)">{{ item.title }}</div>
<img :src="item.image" alt=""/>
<button @click="item.count++"> ❤️ {{ item.count }}</button>
</li>
</ul>
<ul>
<li v-for="(item, index) in products2">
<h4 :style="red">{{ index }} 번</h4>
<div @click="onPopup(item)">{{ item.title }}</div>
<img src="../src\assets\itemImg\img_01.png" alt=""/>
<button @click="item.count++"> ❤️ {{ item.count }}</button>
</li>
</ul>
</div>
<div class="modal-bg" v-if="modal" @click="modal = false">
<div class="modal">
<p class="title">팝업창입니다 </p>
<p class="content">팝업의내용입니다</p>
</div>
</div>
</template>
Vue의 if문
v-if
v-else
v-else-if
Vue의 for문
v-for
Vue html에서 속성 값 불러오기(속성 앞에 :을 붙여줌)
기존
style="display: blodk; color: red;"
Vue
:style="display: block; color: red;"
이미지도 같음
img src="/assets/img/~~"
:img src="/assets/img/~~"
속성 값이 동적이라면
:img src="item.image"
<script>
import testData from './assets/data/data';
export default {
name: 'App',
data(){
// state 값
return {
modal: false,
products: testData,
menus: ['HOME', 'ABOUT', 'CART'],
red: 'color: red',
count: 0,
}
},
// 함수 만드는 곳
methods: {
onPopup(){
this.modal = true;
},
},
components: {
// HelloWorld
}
}
</script>
import한 date.js
var data = [
{
id: 0,
title: '역삼',
image: require("@/assets/itemImg/img_01.png"),
content: '',
count: 0,
price: 3000
},
{
id: 1,
title: '마포',
image: require("@/assets/itemImg/img_02.png"),
content: '',
count: 0,
price: 4000
},
{
id: 2,
title: '망원',
image: require("@/assets/itemImg/img_03.png"),
content: '',
count: 0,
price: 5000
},
]
export default data;이미지 값 절대경로 설정
- 경로를 require로 감싸준다
- assets 앞에 @를 붙여준다(html에서도 같음 => img src="@~~~"
* 파일명만 가지고 있을 때 html에서 적용할 경우
img src="require('@/assets/itemImg/${image}')
var data =
대신 export default 를 앞에 적어줘도 됨(데이터가 하나일경우)
여러개일경우
ex)
export {data1, data2}
로 입력해서 전달
'개발 > Vue' 카테고리의 다른 글
| [Vue.js] vue router 설치, 사용 (0) | 2023.07.20 |
|---|---|
| [Vue.js] 컴포넌트 import, 컴포넌트 데이터 전송(부모 자식간, 자식 부모간) (0) | 2023.07.18 |
| Vue.js 시작하기: Vue 설치 및 프로젝트 생성 (0) | 2023.07.14 |
