Директива v-for в Vue3
Встроенные директивы Vue3v-forДиректива используется для многократного отображения элементов на основе исходных данных и является основной директивой для реализации рендеринга списков в Vue.
Базовое описание
v-forДиректива многократно отображает элементы на основе массива или объекта. Она позволяет многократно отображать группу похожих элементов и использовать значения из источника данных.
- Ожидаемый тип: Array | Object | number | string | Iterable
- Функция: рендеринг списка, многократно отображает элементы на основе исходных данных.
Базовый синтаксис
Пример
<!-- Итерация по массиву -->
<li v-for="item in items">{{ item }}</li>
<!-- Итерация с индексом -->
<li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
<!-- Итерация по объекту -->
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
<!-- Числовая итерация -->
<li v-for="n in 5">{{ n }}</li>
<li v-for="item in items">{{ item }}</li>
<!-- Итерация с индексом -->
<li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
<!-- Итерация по объекту -->
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
<!-- Числовая итерация -->
<li v-for="n in 5">{{ n }}</li>
Сценарии использования
1. Итерация массива
Пример
<template>
<ul>
<li v-for="(fruit, index) in fruits" :key="index">
{{ index + 1 }}. {{ fruit }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
fruits: ['apple', 'banana', 'orange', 'grape']
}
}
}
</script>
<ul>
<li v-for="(fruit, index) in fruits" :key="index">
{{ index + 1 }}. {{ fruit }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
fruits: ['apple', 'banana', 'orange', 'grape']
}
}
}
</script>
2. Итерация массива объектов
Пример
<template>
<table>
<tr v-for="person in people" :key="person.id">
<td>{{ person.id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
people: [
{ id: 1, name: 'Zhang San', age: 25 },
{ id: 2, name: 'Li Si', age: 30 }
]
}
}
}
</script>
<table>
<tr v-for="person in people" :key="person.id">
<td>{{ person.id }}</td>
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
people: [
{ id: 1, name: 'Zhang San', age: 25 },
{ id: 2, name: 'Li Si', age: 30 }
]
}
}
}
</script>
Важность key
В v-for настоятельно рекомендуется указывать уникальный атрибут key для каждого элемента цикла, что помогает Vue эффективно обновлять список.
Пример
<!-- Используйте id как key (рекомендуется) -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
Другие расширения