[vue3] HTML 반복문

 

위와 같이 상단 메뉴바를 만들었다.

a태그가 반복되니 반복문을 활용해보겠다.

 

vue에서 HTML 반복문 문법은 : <태그 v-for="??(작명) in ??(몇회)"> :key="작명"

 

왼쪽 ?? : 개발자 작명

오른쪽 ?? : 몇번 반복될지

반복문 쓸 때 :key 안쓰면 에러

 

in 뒤에 몇회 반복할 숫자를 쓰는 것이 아니라, data를 넣어줄 수도 있다

array/object 자료형 삽입 가능

=> 그러면 자료 안에 데이터 갯수만큼 반복한다

=> 작명한 변수는 데이터안에 자료가 된다

:key의 용도 

반복문으로 생성된 data 요소들을 컴퓨터가 구분하기 위해 쓴다

 

작명은 두개 까지 가능하다 

문법은 v-for="(a, i) in menus" :key="i"< {{a}}

왼쪽 a는 home shop about -> array내에 데이터

오른쪽 i는 반복 횟수 -> 1씩 증가하는 정수

 

{{i}}를 출력해보면 0 1 2 로 나온다