[Vue.js] 반복문 v-for

Vue.js 반복문(v-for)란?

간단하게 얘기하자면 퍼블리셔가 상품목록을 구현한다고 했을때 'div','li' 이런 태그들을 수십개,수백개 똑같은 마크업 형태로 반복 작성하게되는데 이것을 수십개,수백개 마크업하지않고 축약해 줄 수 있는 기능을 제공하는게[ Vue.js의 반복문 'v-for'이다.

 

단순히 같은형태의 마크업만 반복해줄 뿐 아니라 배열(Array),객체(Object)형태로 이루어진 데이터들의 각 항목을 반복하면서 데이터 리스트를 기반으로 HTML을 생성해 줄 수 있다.

 

보통은 데이터리스트 기반으로 HTML을 생성하기위해 사용한다.

 

v-for 기본 문법 

기본 문법은 아래와 같다.

 

<template>
    <ul class="item">
    	<li v-for="작명 in 반복횟수" :key="작명">사과</li>
    </ul>
</template>

1. 원하는 태그 안에 v-for="작명 in 반복횟수" 기입

2. v-for가 기입된 태그 안에 :key="v-for작명" 기입

 

 

Array,Object 데이터를 기입한 v-for

Vue.js의 반복문은 위에 설명한대로 배열(Array),객체(Object)형태의 데이터 리스트 기반으로 HTML을 자동 생성해준다.

그것을 활용한 문법은 아래와 같다.

<template>
    <ul class="item">
    	<li v-for="작명 in items" :key="item">{{ 작명 }}</li>
    </ul>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			 items: ['사과','바나나','포도','딸기','초콜렛'],
		}
	}
}
</script>

기본 문법은 동일하다. 위 코드 기준으로 'items'라는 데이터를 조회하고 그 횟수만큼 반복하여 li태그를 생성해준다.

이후, v-for에서 '작명' 한 것을 데이터 바인딩하여 출력해보면 items의 데이터 값들이 출력된다.

 

1번 반복되면 '사과',

2번 반복되면 '바나나'

3번 반복되면 '포도'

 

위처럼 출력 되는 것을 확인 할 수 있다.

 

v-for="(작명,정수) in data" 작성법

v-for를 사용할때 소괄호'()' 를 열면 작명을 두개까지 허용한다.

소괄호 안에서 좌측에 작성한 작명은 다른 것과 마찬가지로 배열,객체의 데이터가 되고 우측에 작성한 작명은 1씩 증가하는 정수가 된다. 즉, 반복되는 횟수를 알려준다.

 

작성법은 아래와 같다.

<template>
    <ul class="item">
    	<!-- v-for 기본 데이터 출력 -->
    	<li v-for="(작명,정수) in items" :key="정수">{{ 작명 }}</li>
        <!-- ...v-for 기본 데이터 출력 문법 -->

		<!-- v-for 괄호 두개일때 정수를 활용한 데이터 출력 -->
        <li v-for="(작명,정수) in items" :key="정">{{ items[정수] }}</li>
        <!-- ...v-for 괄호 두개일때 정수를 활용한 데이터 출력 -->
    </ul>
</template>

<script>
export default {
	name: 'App',
	data() {
		return {
			 items: ['사과','바나나','포도','딸기','초콜렛'],
		}
	}
}
</script>

다른 v-for문과 다른점은 v-for에 소괄호를 써서 변수명을 두개 작성하게되면 :key값안에 작명한 데이터 명이 아닌 관습적으로 '정수'를 기입해야한다. 

 

v-for은 정확하게 언제 사용?

1. 같은 형태의 수십,수백개의 마크업을 복붙하기 힘들때 사용.

2. HTML을 데이터 갯수만큼 자동으로 생성하는 게 필요 할 때 사용.