728x90
Vue.js v-for와 key 개념 및 예제
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>뷰 v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="person in people"> // == <div v-for="person of people">
이름: {{ person.name }} 나이: {{ person.age }}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
people: [
{name: 'AAA', age: 10},
{name: 'BBB', age: 20},
{name: 'CCC', age: 30},
{name: 'DDD', age: 40},
{name: 'EEE', age: 50}
]
},
methods: {
}
})
</script>
</body>
</html>
실행 결과
코드 - index 사용하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>뷰 v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(person, index) in people">
{{ index }} 이름: {{ person.name }} 나이: {{ person.age }}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
people: [
{name: 'AAA', age: 10},
{name: 'BBB', age: 20},
{name: 'CCC', age: 30},
{name: 'DDD', age: 40},
{name: 'EEE', age: 50}
]
},
methods: {
}
})
</script>
</body>
</html>
실행 결과
코드 - key 사용하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>뷰 v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="(person, index) in people" :key="person.id">
{{ index }} 이름: {{ person.name }} 나이: {{ person.age }}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
people: [
{id: 1, name: 'AAA', age: 10},
{id: 2, name: 'BBB', age: 20},
{id: 3, name: 'CCC', age: 30},
{id: 4, name: 'DDD', age: 40},
{id: 5, name: 'EEE', age: 50}
]
},
methods: {
}
})
</script>
</body>
</html>
key를 사용하는 이유
기존 엘리먼트를 재사용 및 정렬하기 위해서 v-for의 각 항목들에 고유한 속성을 제공하여 항목들을 고유한 ID로 식별할 수 있다.
반복되는 DOM 내용이 단순한 경우나 의도적인 성능 향상을 위해 기본 동작에 의존하지 않는 경우를 제외하고는 가능하면 언제나 v-for에 key를 추가하는 것을 권장한다.
key값에 index를 넣는 것도 가능하지만 데이터의 삭제가 발생할 경우 해당 데이터들의 index가 변화되므로 권장하지 않는다.
key값으로 할 적당한 필드가 없을 경우 :key="person.name + '-' + person.age"와 같이 사용 가능하다.
객체와 배열과 같이 기본 타입이 아닌 값을 key로 사용해서는 안된다. (문자열 및 숫자 사용하기)
728x90
'개념정리 > Vue.js' 카테고리의 다른 글
| [Vue.js] 뷰 컴포넌트 개념 및 예제 (1) | 2022.04.26 |
|---|---|
| [Vue.js] 여러 개의 Vue 인스턴스 사용하기 (2) | 2022.04.26 |
| [Vue.js] Vue v-if와 v-show 개념 및 예제 (1) | 2022.04.26 |
| [Vue.js] Vue 클래스와 스타일 바인딩 개념 및 예제 (1) | 2022.04.26 |
| [Vue.js] Vue watch 속성 개념 및 예제 (1) | 2022.04.26 |
댓글