Search

#030 #VueStudy-016 #목록 렌더링

 v-for 목록렌더링

 코드 예제

코드 복사하기
v-for 디렉티브로 반복되는 태그를 생성할 수 있다. → 최신문법에서는 :key를 할당해야한다고 한다. 고유한 li 요소에 고유한 key를 부여해서 vue가 효율적으로 DOM을 업데이트 할 수 있도록 돕는다. id를 키값으로 사용하는 것이 제일 효과적!
배열에 인덱스가 필요하다면?
v-for문에서 index를 가져와서 쓰면 된다.
아이디가 짝수인 것만 추출하기
반복될 구간 전체를 template 으로 감싸고 추려낼 로직을 v-if으로 로직을 정의한다.
computed로도 가능
필터로 짝수인 것만 걸러서 evenItems에 할당해서 사용

 v-for 객체

이렇게 객체를 속성을 반복문으로 뽑아 보았다.