javascript / beginner
Snippet
Bedingte Anzeige von Badge-Texten mit Switch und primitiven Datentypen
In UI-Komponenten ist eine Verzweigungslogik auf Basis primitiver Zeichenketten üblich, um lesbare Status-Badges anzuzeigen. Die Verwendung einer Switch-Anweisung innerhalb einer Computed Property sorgt für einen klaren Kontrollfluss, explizite Fallbacks und automatische Reaktivitätsverfolgung.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { ref, computed } from 'vue';const orderStatus = ref('in_transit');const statusLabel = computed(() => {switch (orderStatus.value) {case 'pending':return 'Order Placed';case 'in_transit':return 'Out for Delivery';case 'delivered':return 'Completed';default:return 'Unknown Status';}});
vue
Erklärung
1
const orderStatus = ref('in_transit');
Initialisiert eine reaktive Referenz mit einem primitiven String, der den aktuellen Status darstellt.
2
const statusLabel = computed(() => {
Definiert einen reaktiven Getter, der sich automatisch neu berechnet, sobald sich orderStatus ändert.
3
switch (orderStatus.value) {
Prüft den String-Wert von orderStatus gegen vordefinierte Fallunterscheidungen.
4
case 'pending': return 'Order Placed';
Trifft auf 'pending' zu und liefert die entsprechende Beschriftung zurück.
5
case 'in_transit': return 'Out for Delivery';
Trifft auf den Status für laufende Lieferungen zu und gibt den Beschreibungstext zurück.
6
default: return 'Unknown Status';
Stellt einen sicheren Standard-String bereit, falls kein definierter Fall zutrifft.