[vue.js] v-for

 

 

1. 리스트 렌더링과 v-for 

v-for 디렉티브를 사용하여 배열을 기반으로 리스트 렌더링을 할 수 있다. 

이 디렉티브는 item in array 형태의 특수 구문을 필요로 한다.

이 구문에서 array는 원본 데이터 배열이고, item은 순회되는 배열의 엘리먼트의 별칭이다.

 

 

 

2. 범위를 가진 v-for

v-for 디렉티브는 객체나 배열이 아닌 정수를 받을 수 있다.

이때 정수가 전달되면 템플릿이 지정된 수만큼 반복한다.

<li v-for="i in 11">  은  item in array  형태로 작성된 것이다. array에 배열이 아닌 정수가 들어간것.

즉 li태그가 11번 반복 될 것이다.

 

저 상태에서 그냥 i 만 찍어보면 ( {{ i }} )

 

저 상태에서 그냥 i -1을 하면 다음과 같이 나오고 

나는 2 x {{ i - 1 }} = {{ (i-1) * 2 }} 를 써서 구구단 2단을 만들었다.

 

 

 

3. 배열 렌더링  - 배열 순회

v-for 을 이용하여 배열 순회를 다음과 같이 할 수 있다. 

stories라는 배열을 v-for로 순회하여 하나씩 <li>태그로 화면에 뿌렸다.

 

 

화면 출력 (li style은 내가 임의로 준것이다) 

 

 

 

4. 배열 렌더링  - 객체 배열 순회

v-for 을 이용하여 객체 배열 순회를 다음과 같이 할 수 있다. 

 

 

화면 출력

 

현재 항목의 index를 표시 해야하는 경우,

index라는 변수를 사용하여 출력할 수 있다.

index의 범위는 0....n-1이다. 이때 n은 객체 프로퍼티의 개수이다. 

 

 

 

5. 배열 렌더링  - v-for을 이용한 객체 프로퍼티 순회

v-for 을 이용하여 객체의 프로퍼티를 순회할 수 있는데, 앞에서 배열의 index 외에도 각 유효범위에서는 

key라는 특별한 프로퍼티에 접근할 수 있다.

value, key, index 를이용해 객체의 프로퍼티를 순회하며 인덱스 뿐만 아니라 키-값 쌍을 가져올 수 있다.

 

 

화면출력