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

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

const orderStatus = ref('in_transit');

Initialisiert eine reaktive Referenz mit einem primitiven String, der den aktuellen Status darstellt.

const statusLabel = computed(() => {

Definiert einen reaktiven Getter, der sich automatisch neu berechnet, sobald sich orderStatus ändert.

switch (orderStatus.value) {

Prüft den String-Wert von orderStatus gegen vordefinierte Fallunterscheidungen.

case 'pending': return 'Order Placed';

Trifft auf 'pending' zu und liefert die entsprechende Beschriftung zurück.

case 'in_transit': return 'Out for Delivery';

Trifft auf den Status für laufende Lieferungen zu und gibt den Beschreibungstext zurück.

default: return 'Unknown Status';

Stellt einen sicheren Standard-String bereit, falls kein definierter Fall zutrifft.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Bedingte Anzeige von Badge-Texten mit Switch und primitiven Datentypen

Verwandt