Vue3 v-for Direktive
Vue3 Eingebaute Direktivenv-forDie Direktive wird verwendet, um Elemente mehrmals auf Basis von Quelldaten zu rendern, und ist die Kern-Direktive für die Umsetzung des Listen-Renderings in Vue.
Grundlegende Beschreibung
v-forDie Direktive rendert Elemente wiederholt auf Basis eines Arrays oder Objekts. Sie ermöglicht es, eine Gruppe ähnlicher Elemente wiederholt zu rendern und Werte aus der Datenquelle zu verwenden.
- Erwarteter Typ: Array | Object | number | string | Iterable
- Funktion: Listen-Rendering, rendert Elemente mehrmals auf Basis von Quelldaten.
Grundlegende Syntax
Beispiel
<!-- Array-Iteration -->
<li v-for="item in items">{{ item }}</li>
<!-- Iteration mit Index -->
<li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
<!-- Objekt-Iteration -->
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
<!-- Numerische Iteration -->
<li v-for="n in 5">{{ n }}</li>
<li v-for="item in items">{{ item }}</li>
<!-- Iteration mit Index -->
<li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
<!-- Objekt-Iteration -->
<li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
<!-- Numerische Iteration -->
<li v-for="n in 5">{{ n }}</li>
Verwendungsszenarien
1. Array-Iteration
Beispiel
<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. Objekt-Array-Iteration
Beispiel
<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>
Die Bedeutung von key
In v-for wird dringend empfohlen, für jedes Schleifenelement ein eindeutiges key-Attribut anzugeben, was Vue dabei hilft, die Liste effizient zu aktualisieren.
Beispiel
<!-- Verwende id als key (empfohlen) -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
Andere Erweiterungen