javascript / beginner
Snippet
Listen-Rendering mit v-for
Die v-for-Direktive wird verwendet, um eine Liste von Elementen basierend auf einem Array zu rendern. Sie verwendet die Syntax 'item in items'. Es ist erforderlich, einen eindeutigen ':key' anzugeben, damit Vue die Elemente effizient verfolgen und aktualisieren kann.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template><ul><li v-for="user in users" :key="user.id">{{ user.name }}</li></ul></template><script setup>const users = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' }];</script>
vue
Erklärung
1
v-for="user in users"
Iteriert durch das users-Array und weist jedes Objekt der Variable 'user' zu.
2
:key="user.id"
Ein eindeutiger Identifikator, den Vue zur Optimierung des Listen-Renderings verwendet.
3
{{ user.name }}
Zeigt die Eigenschaft 'name' des aktuellen Benutzers im Template an.