Vue를 알아야 한다. - HTML 반복문 v-for

HTML 반복문 v-for

HTML에서 반복되는 코드를 v-for 문법을 통해 반복적으로 생성 가능하다.
기존 for 반복문과 비슷한 문법이다.

• 사용법
  <태그 v-for="변수 in 횟수" :key="유니크한 값">

원하는 태그에 v-for="작명 in 반복할횟수"를 적는다.
그리고 이 반복적으로 생성된 태그에는 유니크한 key값이 있어야한다.(React와 동일)

• v-for 반복문에는 array/object같은 자료형을 사용 가능하다.

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

data(){
  return {
    메뉴들 : ['Home', 'Shop', 'About']
  }
}

메뉴들이라는 array 자료형을 순회하게 되며, 작명한 변수는 자료형안에 데이터가 된다.
예를 들어서 작명한 변수는 출력해보면 1회 반복시엔 'Home' 2회 반복시엔 'Shop' 이렇게 변한다.

• v-for 안에 변수는 2개까지 작성 가능하다.
  첫 번째는 앞서 설명한 것처럼 자료형안에 데이터가 되고, 두 번째는 그 데이터의 순서(인덱스)가 된다.

• :key=""의 용도
  Vue에서 반복문쓸 때 꼭 써야된다.
  반복문 돌린 요소를 컴퓨터가 구분하기 위해 쓴다.
  key의 내용은 인덱스로 설정하는게 일반적이고 유니크한 값을 사용해야 한다.