Vue:반복문: 두 판 사이의 차이

학교의 모든 지식. SMwiki
둘러보기로 이동 검색으로 이동
(새 문서: {{Vue}} == HTML 반복 == 태그 안에 <code>v-for="이름 in 자료구조" :key="이름"</code> 형태의 속성을 추가한다. {| class="wikitable" |+ !예시 |- |<syntaxhighlig...)
 
 
(같은 사용자의 중간 판 하나는 보이지 않습니다)
1번째 줄: 1번째 줄:
{{Vue}}
{{Vue}}


== HTML 반복 ==
==HTML 반복==
태그 안에 <code>v-for="이름 in 자료구조" :key="이름"</code> 형태의 속성을 추가한다.
태그 안에 <code>v-for="이름 in 자료구조" :key="이름"</code> 형태의 속성을 추가한다.
{| class="wikitable"
{| class="wikitable"
9번째 줄: 9번째 줄:
|<syntaxhighlight lang="html">
|<syntaxhighlight lang="html">
<a v-for="이름 in 자료구조" :key="이름">{{ 이름 }}</a>
<a v-for="이름 in 자료구조" :key="이름">{{ 이름 }}</a>
</syntaxhighlight>
</syntaxhighlight><syntaxhighlight lang="html">
<a v-for="(이름, 정수) in 자료구조" :key="정수">{{ 이름 }} {{ 정수 }}</a>
</syntaxhighlight>좌측 변수 작명은 2개가 가능한데, 오른쪽은 1씩 증가하는 정수가 된다.
 
key는 반드시 필요한데, 보통 유니크한 데이터를 넣는다.
|}
|}
자료 외에 숫자를 넣을 수도 있다.
자료 외에 숫자를 넣을 수도 있다.

2022년 7월 4일 (월) 16:54 기준 최신판

틀: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는 반드시 필요한데, 보통 유니크한 데이터를 넣는다.

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