예제 코드에서 in 키워드 오른쪽에 오는 데이터는 data 옵션 속성으로 정의한 데이터 속성입니다. 그리고 in 키워드 왼쪽에 오는 식별자는 원하는 아무 이름이나 지정할 수 있습니다. 보통은 item, index와 같은 식별자를 많이 사용합니다. 예제 코드처럼 배열을 반복해서 출력할 때는 key 속성에 고유한 값을 할당하기 위한 용도로 index를 사용합니다. index는 반복문이 실행되어 반복될 때마다 값이 0부터 1씩 순차적으로 증가하기 때문입니다.

다음 코드처럼 <li> 태그 부분의 key 속성을 그냥 쓰면 안 됩니다. 그러면 <li> 태그의 key 속성의 값이 모두 문자열 index로 똑같아집니다.

잘못된 코드

<li v-for="(fruit, index) in fruits" key="index">

여기서는 요소를 반복하면서 얻는 인덱스(index)를 key 속성에 바인딩해서 서로 다른 값을 가지게 하는 것이 목적입니다. 그래서 key 속성에 값을 할당할 때는 반드시 v-bind 디렉티브(축약형 :)를 사용해야 합니다. 사용하지 않으면 v-for 디렉티브로 반복되는 <li> 태그는 모두 key 속성의 값으로 문자열 index를 가지게 됩니다. v-bind 디렉티브를 사용해야 다음 실행결과처럼 key 속성의 값이 반복될 때마다 0, 1, 2가 됩니다.