[vue.js] Vue 반복문 v-for

<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 완벽 가이드 - 코딩애플 온라인 강좌