리스트 렌더링 | Vue.js

v-for

→ v-for 디렉티브를 사용해서 배열을 렌더링할 수 있다.

• v-for 디렉티브는 item in items 형식의 특별한 문법이 필요하다.
  • items : 배열
  • item : 배열 내 반복되는 요소의 alias

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

<li v-for="item in items">
  {{ item.message }}
</li>

• v-for 범위 내 템플릿 표현식은 모든 상위 범위 속성에 접근할 수 있다.
  • 또한, 현재 아이템의 인덱스를 가리키는 선택적 두 번째 alias도 지원한다.

const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

• v-for 의 변수 범위는 JavaScript와 유사하다.

const parentMessage = 'Parent'
const items = [
  /* ... */
]

items.forEach((item, index) => {
  // forEach의 콜백 함수 외부에 있는 `parentMessage`에 대한 접근 가능.
  // 반면 `item`과 `index`는 콜백함수 내부에서만 접근 가능.
  console.log(parentMessage, item.message, index)
})

• v-for 에 주어진 값이 forEach 의 콜백 함수의 특징과 유사하다.
  • v-for 의 아이템도 콜백 함수 인자를 분해 할당해 사용하는 것처럼, 분해 할당해 사용할 수 있다.

<li v-for="{ message } in items">
  {{ message }}
</li>

<!-- index 에일리어스도 사용 -->
<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>