● v-for

v-for 디렉티브는 뷰에서 반복적으로 렌더링하는 HTML 요소를 생성하는 데 사용합니다. 배열과 객체를 사용할 때 형식이 각각 다른데, 배열일 때 형식은 다음과 같습니다.

v-for="값 in 배열" key="고유값"
v-for="(값, 인덱스) in 배열" key="고유값"

배열일 때는 in 키워드 오른쪽에 반복할 대상이 되는 데이터 속성 또는 값(배열)을 적습니다. 그리고 in 키워드 왼쪽에는 데이터를 하나씩 반복해서 할당할 값을 적습니다. 배열의 인덱스도 가져오고 싶다면 in 키워드 왼쪽에 값과 인덱스를 쉼표(,)로 구분해서 적고 소괄호로 감싸주면 됩니다. 주의할 점은 반드시 key 속성을 사용해 고유한 값(중복되지 않는 값)이 할당되도록 해야 한다는 점입니다.

v-for 디렉티브를 사용해 배열을 반복적으로 출력하는 예제를 살펴보겠습니다.