#3. Vue 반복문

v-for HTML 반복문1

vue는 반복문이 엄청 간단하고 편리하게 사용 할 수있습니다. 기본적인 문법은 아래와 같습니다.

<div>
 <a v-for="작명 in 3" :key="작명">아무거나</a>
</div>

첫번째는 원하는 태그에 v-for="작명 in 반복횟수" 를 적습니다. 그리고 제일 중요한 :key 속성은 반복문을 돌릴 때 꼭 필요합니다. 반복한 요소들을 각각 구분짓기 위한 속성이기 때문입니다. 안적으면 에러가 생깁니다.

v-for HTML 반복문2

반복문을 사용할 때 array, object데이터를 집어 넣을수도 있습니다.

//...생략

data(){
    return {
        menu : ['hello','joycoding','teemo']
    }
}

예를 들어 위와 같이 데이터에 메뉴 객체가 있다고 가정했을 때 아래와 같이 반복을 표현 할 수 있습니다.

<div>
 <a v-for="작명 in menu" :key="작명">{{작명}}</a>
</div>

menu의 자료 갯수만큼 반복되며 작명한 변수는 반복될 때마다 메뉴들 안에 있던 자료들이 됩니다.

v-for 반복문

v-for 안에 변수는 2개까지 작명이 가능합니다.

<div>
 <a v-for="(작명,i) in menu" :key="i">{{작명}}</a>
</div>

()소괄호를 열면 작명을 두개까지 허용해줍니다. 첫째 작명한건 배열안의 데이터가 되는 것이고 두번째 인자는 0,1,2...식으로 1씩 증가하는 정수가 됩니다. 반복 횟수를 알려주는 숫자라고 생각하면 됩니다. 그리고 이걸 관습적으로 :key 안에 집어 넣습니다.