Vue:반복문

학교의 모든 지식. SMwiki
Sam (토론 | 기여)님의 2022년 7월 1일 (금) 07:56 판
둘러보기로 이동 검색으로 이동

틀:Vue

  1. Vue:개요
    1. Vue:설치 및 개발환경 세팅
    2. Vue:프로젝트 생성 및 시작해보기
  2. Vue:문법
    1. Vue:데이터바인딩
    2. Vue:반복문
    3. Vue:조건문
    4. Vue:함수
  3. Vue:이벤트
    1. Vue:이벤트 핸들러

HTML 반복

태그 안에 v-for="이름 in 자료구조" :key="이름" 형태의 속성을 추가한다.

예시
<a v-for="이름 in 자료구조" :key="이름">{{ 이름 }}</a>
<a v-for="(이름, 정수) in 자료구조" :key="정수">{{ 이름 }}</a>
좌측 변수 작명은 2개가 가능한데, 오른쪽은 1씩 증가하는 정수가 된다.

key는 반드시 필요한데, 보통 유니크한 데이터를 넣는다.

자료 외에 숫자를 넣을 수도 있다.