Vue 렌더링 나역 for문

렌더링 나열

이 과정에서는 Vue를 사용하여 웹 페이지에 목록을 표시하는 방법에 대해 알아봅니다.

우리의 목표

우리는 우리 제품의 세부 사항 목록을 표시할 수 있기를 원한다.

시작 코드

현재 프로젝트의 코드는 다음과 같습니다.

여기서 새로운 것은 우리의 제품 군입니다.details맨 밑에

문제

우리는 우리의 페이지가 우리의 제품을 보여 주기를 원한다.details데이터를 표시하기 위해 이 배열을 어떻게 반복할 수 있을까요?

해법

다른 Vue명령어로 구조합니다. 그v-for명령어를 사용하면 어레이를 루프 하여 데이터를 렌더링 할 수 있습니다.

이제 세부 사항들이 목록에 나와 있습니다. 하지만 이것이 어떻게 작동할까요?

의 따옴표 안에 있는 구문v-for지시는 JavaScript를 사용한 적이 있으면 친숙해 보일 수 있습니다.for of아니면for in전에 그v-for다음과 같이 작동합니다.

우리는 단수 명사를 사용한다.detail)를 배열에 포함된 문자열의 별칭으로 사용합니다. 그때 우리는 말한다.in컬렉션의 이름을 지정합니다(details우리가 반복하고 있는 것이다. 이중 나선 가새 내부에서 표시할 데이터를 지정합니다.{{ detail }}).

우리의 심실 세동이 왔으니<li>, Vue는 새로운 것을 인쇄할 것이다.<li>우리들의 각 세부 사항에 대해.details배열하다.v-for안에 있었다<div>그 다음에<div>각 어레이 항목에 대해 해당 내용과 함께 인쇄되었을 것입니다.

상상할 수 있다.v-for어셈블리 라인처럼, 목록을 구성하기 위해 한번에 하나씩 컬렉션에서 요소를 가져오는 기계 암.

좀 더 복잡한 예를 살펴보겠습니다. div형식으로 개체의 데이터를 표시합니다.

개체 위로 이동

문제

구축 중인 제품 페이지는 동일한 제품의 다른 버전을 보여 줄 수 있어야 합니다. 데이터의 배열을 기반으로 합니다.variants데이터를 표시하기 위해 이 일련의 객체들을 어떻게 반복할 것인가?

각 모델의 색상을 표시해 보겠습니다. 우리는 다음과 같이 쓸 것이다.

이 경우에는, 우리는 단지 바리안트 객체의 색상을 표시하기를 원합니다. 그래서 우리는 점 표기법을 사용하여 그렇게 하고 있습니다. 만약 우리가 쓴다면{{ variant }}전체 개체를 표시합니다.

이러한 요소를 렌더링 할 때는 각 노드의 ID를 추적할 수 있도록 특수 키 속성을 사용하는 것이 좋습니다. 이제 우리는 우리의 독특한 모델을 사용하여 그것을 추가할 것이다.variantId소유물