[Vue.js] v-for 반복문

 

알림

 

본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다.

 

과제

 

과제

 

배열을 데이터에 담아 데이터 바인딩 해 오는 것이 과제였습니다.

 

결과

 

v-for 반복문

 

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

 

결과

 

근데 이렇게 되면 HOME만 세 번이 출력이 돼 사실 메뉴의 역할은 못 하고 있는 모습입니다.

 

위에 코드블럭에서 "작명 in 3"은 곧 세 번만큼 돌아 HOME이 출력되는 논리였는데, 저 '3' 자리에 배열이 들어갈 수도 있고, 배열을 넣어주게 되면 우리가 의도하는 메뉴에 더욱 가까운 모습으로 개발이 가능해집니다.

 

 

결과

 

반복문 key

 

반복문을 작성할 때 key를 꼭 작성하라고 하는데요. 그 이유는 사용하지 않으면 오류가 나기 때문이고, key의 역할은 컴퓨터가 반복문을 돌린 요소를 구분하기 위함이기 때문에 이를 구분할 수 있게끔 유니크한 문자 등을 입력해주는 것 같습니다.

 

이때, key 값은 변수를 두 개 작성할 수 있는데, 왼쪽은 데이터의 값을, 오른쪽은 숫자가 1씩 증가하는 정수라고 합니다. 그렇기 때문에 변수를 두 개 지정해 준 후, 태그 안에 오른쪽의 정수를 입력하면 데이터의 값이 아닌, 1씩 증가하는 정수를 확인할 수 있습니다.

 

변수 두 개 지정

 

결과