Vue02 반복문

오늘 배울 내용: Vue의 HTML 반복문

<태그 v-for=“ 작명 in 몇 번 반복 할 지”>

<a v-for="작명 in 3" :key="작명" href="">Home</a>
// 반복문 쓸 때 :key 안쓰면 에러남

Vue 문법 쓰면, 비슷한 Html들 만들 때 코드 한 줄 컷

메뉴생성에 필요한 정보들 일단 data( ) 란에 저장하기

‘3’자리에 array/object 자료형 집어넣기 가능. 자료형을 집어넣으면 자료형 안에 있는 데이터 갯수만큼 (알아서) 반복해서 집어넣는다.

<a v-for="작명 in 메뉴들" :key="작명" href="">  </a>

1. 자료안의 데이터 갯수만큼 반복됨
2. 작명한 변수는 데이터안의 자료가 됨

:key=“”의 용도

• 반복문 쓸 때 꼭 써야함
• 반복문 돌린 요소를 컴퓨터가 구분하기 위해 씀

Vue 반복문의 특: 변수 작명 2개까지 가능

• 왼쪽 변수는 array 내의 데이터
• 오른쪽 변수는 1씩 증가하는 정수

  <a v-for=“(a,i) in 메뉴들" :key=“i” href="">  </a>
  

  반복문은 쓰고 싶을 때 쓰는 것일 뿐.