<template>
<div class="menu">
<!-- in에 반복 횟수를 적을 수 있음 -->
<!-- <a v-for="작명 in 3" :key="작명">Home</a> -->
<!-- <a v-for="작명 in 메뉴들" :key="작명">Home</a> -->
메뉴들 배열의 크기 만큼 home이 반복해서 나감
<!-- key가 index가 되는거임 iter에 for(int num: nums)일때 num과 같은 역할-->
<a v-for="작명 in 메뉴들" :key="작명">{{ 작명 }}</a>
</div>
<img alt="Vue logo" src="./assets/logo.png" />
<div>
<h4 :style="스타일">{{ products[0] }}</h4>
<p>{{ price1 }} 만원</p>
</div>
<div>
<h4>{{ products[1] }}</h4>
<p>{{ price2 }} 만원</p>
</div>
<div>
<h4>{{ products[2] }}</h4>
<p>{{ price3 }} 만원</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
price1: 50,
price2: 70,
price3: 80,
스타일: "color : blue",
products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
<!-- <a v-for="작명 in 메뉴들" :key="작명">{{ 작명 }}</a> in에 배열을 넣을 수 있음-->
메뉴들: ["Home", "Shop", "About"],
};
},
components: {},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.menu {
background: darkslateblue;
padding: 15px;
border-radius: 5px;
}
.menu a {
color: white;
padding: 10px;
}
</style>
<a v-for="(a, i) in 메뉴들" :key="(a, i)">{{ a }}{{ i }}</a>
왼쪽은 배열의 값, 오른쪽은 인덱스의 값이 들어감

<template>
<div class="menu">
<a v-for="(a, i) in 메뉴들" :key="(a, i)">{{ a }}{{ i }}</a>
</div>
<!-- 객체를 넣어서 돌릴 수 도 있음-->
<div v-for="products in productsGroup" :key="products">
<h4 :style="스타일">{{ products.products }}</h4>
<p>{{ products.price }} 만원</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
productsGroup: [
{
products: "역삼동원룸",
price: "50",
},
{
products: "천호동원룸",
price: "70",
},
{
products: "마포구원룸",
price: "80",
},
],
};
},
components: {},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.menu {
background: darkslateblue;
padding: 15px;
border-radius: 5px;
}
.menu a {
color: white;
padding: 10px;
}
</style>

인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드 - 코딩애플 온라인 강좌
누구나 마음 한켠엔 나만의 웹서비스를 만들고 싶어합니다. 프론트엔드는 어찌저찌 하겠는데 서버 만드는게 어렵고 귀찮다고요? 그렇다면 Firebase를 쓰십시오. 구글이 웹서버를 대신 만들어
codingapple.com