v-for

<tag v-for="작명 in 몇회": key="작명">

Example

<div class="menu">
    <a v-for="element in 3" :key="element">Home</a>
</div>

• 이렇게 되면 Home이 3번 반복된다.
• 갖고있는 데이터로 집어넣고 싶다면 ??

<div class="menu">
    <a v-for="element in menus" :key="element">{{element}}</a>
</div>

export default {
  name: 'App',
  data() {
    return {
      menus : ["Home", "Shop", "About"],
      products : ['first', 'second', 'third'],
    }
  },
  components: {
  }
}

• menus라는 데이터에 정의된 데이터를 순서대로 출력할 수 있다.

• vue 반복문은 array/object 집어넣기가 가능하고 해당 자료안의 데이터 개수만큼 반복된다.
• 위에서 "작명" 이라고 한ㄷ 부분에는 데이터 안의 자료가 된다.
• :key=''의 용도는 해당 태그에 대한 구분을 짓기 위함이다.
  • unique하게 변하는 문자,숫자를 넣으면 알아서 for문에서 이를 기준으로 구분해준다.

<a vfor="(a, i) in menus" :key="i"> {{ ... }} </a>

• a는 array내 데이터, i는 1씩 증가하는 정수이다.