3. 반복문

https://youtu.be/T4N9wjx7_E4

vue의 반복문은 

v-for="작명 in 횟수" :key="작명"

의 형태이다.

 

그런데

 

저 횟수 안에 array나 object도 넣을 수 있고 그 array나 object 안에 들어있는 개수 만큼 반복해주는 기능도 있다.

 

이걸 왜 쓰냐?

 

작명이라고 내가 만든 변수를 데이터바인딩하면 array안의 데이터를 출력할 수 있기 때문임.

  <div class="menu">
    <a v-for="작명 in menus" :key="작명">{{ 작명 }}</a>
  </div>
  
  
  data() {
    return {
      menus: ['Home', 'Shop', 'About'],
      products: ['역삼동원룸', '천호동원룸', '마포구원룸'],
      price: [50, 100, 150],
    };

{{ 작명 }} 에 Home Shop About이 차례대로 출력된다.

 

그리고 key는 인덱스 개념인데 작명 부분에 (작명, i) 이런식으로 변수를 2개까지 넣을 수 있고 i가 인덱스 역할을 해주므로 key=i 이런식으로 넣으면 인덱싱이 된다.

 

 

<template>
  <div class="menu">
    <a v-for="(작명, i) in menus" :key="i">{{ 작명 }}({{ i }})</a>
  </div>

  <div v-for="(p, i) in list" :key="i">
    <h4>{{ p.원룸명 }}</h4>
    <p>{{ p.가격 }} 만원</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      menus: ['Home', 'Shop', 'About'],
      list: [
        { 원룸명: '역삼동원룸', 가격: 50 },
        { 원룸명: '천호동원룸', 가격: 100 },
        { 원룸명: '마포구원룸', 가격: 150 },
      ],
    };
  },
  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>

이중 for문을 돌리려 했는데 방법을 못찾겠어서 list 안에 오브젝트를 여러개 넣는 걸로 for 문을 한 번만 돌리는 방법으로 해결했다.