[Vue.js] v-for

코드를 짜다가 반복되는 부분이 있으면 for문을 사용해서 축약을 할 수 있습니다

🟢 하드코딩

<template>
  <div>
    <h4>{{colors[0]}}</h4>
    <h4>{{colors[1]}}</h4>
    <h4>{{colors[2]}}</h4>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return {
      //이 부분에 데이터 입력하기!!
      colors : ['red', 'yellow', 'blue'],
    }
  },
}
</script>

🟢 v-for

<template>
  <div>
   <h4 v-for="color in colors" :key="color">{{color}}</h4>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      //이 부분에 데이터 입력하기!!
      colors : ['red', 'yellow', 'blue'],
    }
  },
}
</script>

---

v-for의 3가지 방법

1. v-for="작명 in 반복할 횟수" :key="작명"
   • :key 속성은 반복한 요소들을 각각 구분짓기 위한 속성입니다

	<a v-for="작명 in 3" :key="작명">HOME</a>

2. v-for="작명 in 메뉴들" :key="작명"
   • 1번의 반복시킬 횟수를 적는 부분에 array 자료를 집어넣을 수 있습니다
   • 메뉴들 안의 자료 갯수만큼 반복됩니다
   • 작명한 변수는 반복될 때마다 메뉴들 안에 있는 자료들이 됩니다

	<a v-for="작명 in 메뉴들" :key="작명">{{작명}}</a>

3. v-for="(작명,i) in 메뉴들" :key="i"

	<a v-for="(작명,i) in 메뉴들" :key="i">{{작명}}</a>