[Vue] 반복문 v-for :key

null·2023년 3월 27일
0

Vue

목록 보기
3/7

<태그 v-for="이름 in 반복횟수" :key="">


<div>
 <a v-for="(메뉴) in 3" :key="메뉴"> {{메뉴}}</a>
</div>

-----------------
data() {
 return {
  메뉴 : ['Home', 'Products', 'About']
 }
}
  • 결과

<div>
 <a v-for="(a,i) in 메뉴" :key="i"> {{메뉴}}</a>
	// {{i}} : 0,1,2
</div>

-----------------
data() {
 return {
  메뉴 : ['Home', 'Shop', 'About']
 }
}
  • 결과

  • v-for="(메뉴,i) in 3"

  • v-for="(메뉴,i) in 메뉴"
    : 반복횟수 대신 array/ object 집어 넣기 가능
    : 메뉴에 들어있는 데이터의 개수만큼 반복함

  • :key="i"
    : 반복문 돌린 요소를 컴퓨터가 구분하기 위해 씀, 필수 기입
    : i ? 반복문 돌면서 변하는 숫자/문자
    : 키 속성은 반복되는 배열의 각 항목에 대해 항상 고유한 값이어야 한다
    : index는 요소에 속한 값이 아니고 그때 그때 바뀌는 값이기 때문에 사용하면 안된다

0개의 댓글