Vue의 반복문 V-for

Vue에서 반복문을 알아보자.

 

반복적인 코드를 작성하거나, 혹은 반복적인 태그를 여러개 생성해야될때 주로 사용되는게 바로 For(반복문)이다.

 

if와 for는 플랫폼을 가리지 않고 자주 사용되는데 Vue에서도 마찬가지로 반복문을 사용하여 반복적인 코드를 한번에 생성하도록 할수 있다.

 

<template>
  <div>
      <h4>{{products[0]}} 매매</h4>
      <p>{{price2}} 만원</p>
  </div>
  <div>
      <h4>{{products[1]}} 전세</h4>
      <p>{{price1}} 만원</p>
  </div>
  <div>
      <h4>{{products[2]}} 전세</h4>
      <p>{{price3}} 만원</p>
  </div>
</template>

 

이 코드를 보면 <div> 태그가 반복되어 행해지고 있다. 그리고 data 영역 안에서 선언된 products와 price 변수들을 이용하여 데이터 바인딩 처리를 해주고 있는데

 

V-for를 이용한다면 간단하게 여러 div를 data 갯수에 맞게 처리가 가능하다.

 

반응형

 

<template>
  <div v-for="(item, index) in products" :key="index">
      <h4>{{item}} 매매</h4>
      <p>{{price[index]}} 만원</p>
  </div>

 

이런식으로 v-for를 적용하면 products라는 data안에 있는 요소들이 item에 대입되며 반복하게 되고 그 반복 횟수는 products 데이터 요소들의 개수와 동일한 횟수로 반복하게 된다.

 

보통 Array 타입의 반복요소들을 처리하다보면 index값이 필요하다. price[1], price[2]처럼 말이다.

 

1씩 증가하는 값을 표현해주기 위해서 v-for문 안에 위와같이 item과 index값을 지정해줄수도 있다.

 

그럼 index는 고유의 1씩 증가하는 값을 가지게 되며, 그 index값을 가지고 Array 타입의 요소들의 값을 하나씩 꺼낼수도있다.