Taran

1. v-for 반복문 바인딩

v-for 지시자는 list, map과 같은 다수의 데이터를 포함한 객체형 변수를 반복하여 출력할 때 사용된다. 

먼저 상단의 Template을 보면,

(1) 상수값 5에 따라 인덱스를 출력하는 반복문

(2) list형 변수의 값을 전체 출력하는 반복문

(3) map형 변수의 key, value를 받아 동시에 출력하는 반복문 

총 세 종류를 확인할 수 있다. 

최초 페이지 출력 상태를 보자. 

(1) 상수값 5에 따라 인덱스를 출력하는 반복문

보통 개발 언어의 인덱스는 0 base(zero base) indexing에 따라 0부터 시작하기 마련이지만, v-for을 이용한 출력에서는 1 base 방식인 것을 확인할 수 있다. 

(2) list형 변수의 값을 전체 출력하는 반복문

list의 경우, 처음에는 값이 비워져 있어 버튼만 출력된 것을 볼 수 있다.

여기서 버튼 이벤트를 실행해보자.

( * 실행 순서는 push, push, pop, push, pop 이다. [push : 1 된 숫자 추가, pop : 목록의 마지막 숫자를 제외] )

화살표 순서를 따라 보면, list 변수값에 따라 양방향 바인딩을 통해 목록이 동적으로 변하는 것을 확인할 수 있다.

(3) map형 변수의 key, value를 받아 동시에 출력하는 반복문

map형 변수의 경우, 예시 데이터를 보면 순서가 고의적으로 바뀌어 있는 것을 알 수 있다.

key 4가 두 번째 위치에 있는 상태로 반복 출력을 실행한 상태이다. 결과를 보면 알 수 있듯이, 값의 입력 순서를 기준으로 출력되고 있다.