0Pricing
Vue Academy · Lektion

Pluralisierung und verknüpfte Nachrichten

Pluralregeln mit der Syntax @:key|@:key, mengenabhängige Pluralformen und verknüpfte Nachrichten mit @:path

Pluralisierung und verknüpfte Nachrichten ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Zählen ist sprachabhängig

„1 item“, aber „5 items“ – und andere Sprachen haben sogar noch mehr Formen. Fest codierte Pluralformen führen zu unnatürlichen Zeichenfolgen wie „5 item(s)“. Vue I18n verfügt über eine integrierte Pluralisierung, die anhand einer Anzahl die richtige Form auswählt.

Pluralformen durch Pipes trennen

Schreiben Sie die Formen in einer Nachrichtenzeichenfolge und trennen Sie sie durch das Pipe-Zeichen (|). Für Englisch sind zwei oder drei Formen üblich.

const en = {
  items: "no items | one item | {count} items",
}

Eine Pluralform anhand einer Anzahl auswählen

Übergeben Sie eine Zahl als zweites Argument an t. Vue I18n wählt anhand der Anzahl die passende Form aus.

const { t } = useI18n()

t("items", 0) // "no items"
t("items", 1) // "one item"
t("items", 9) // "9 items"

Die standardmäßige Pluralregel

Bei drei Formen gilt folgende Regel: 0 verwendet die erste, 1 die zweite und jede andere Zahl die dritte Form. Bei zwei Formen werden 0 und größere Mengen zusammengefasst.

const en = {
  // two-form version: 0 and N share the plural
  files: "no file | one file | {count} files",
}

Der Platzhalter {count}

In einer Pluralnachricht wird der spezielle Platzhalter {count} (oder {n}) mit der übergebenen Zahl gefüllt, sodass Sie den Wert anzeigen können.

const en = { photos: "no photos | {count} photo | {count} photos" }

t("photos", 3) // "3 photos"

Pluralformen in Templates

Verwenden Sie in Templates $t mit der Anzahl als zweitem Argument, genau wie in Skripten.

<template>
  <p>{{ $t("items", cartCount) }}</p>
</template>

Anzahl und benannte Werte kombinieren

Sie können sowohl eine Anzahl als auch benannte Platzhalter übergeben, indem Sie die Anzahl zusammen mit einem Werteobjekt angeben.

const en = { greeting: "Hi {name}, no messages | Hi {name}, {count} messages" }

t("greeting", 2, { named: { name: "Ada" } })
// or per API: t("greeting", { name: "Ada" }, 2)

Was sind verknüpfte Nachrichten?

Manchmal sollte eine Übersetzung eine andere einbetten, um Duplikate zu vermeiden. Verknüpfte Nachrichten verweisen mit der Syntax @: auf einen anderen Schlüssel.

const en = {
  brand: "Acme",
  welcome: "Welcome to @:brand",
}

Eine Verknüpfung auflösen

Wenn Sie welcome übersetzen, wird das Token @:brand durch den übersetzten Wert von brand ersetzt. Ändern Sie brand einmal, und jede verknüpfte Nachricht wird aktualisiert.

t("welcome") // "Welcome to Acme"
// change brand -> all linked messages reflect it

Mit verschachtelten Schlüsseln verknüpfen

Verknüpfungen funktionieren auch mit verschachtelten Schlüsseln, die durch Punkte getrennt sind. Umschließen Sie mehrteilige Verweise bei Bedarf mit Klammern.

const en = {
  app: { name: "MyApp" },
  footer: "Thanks for using @:(app.name)",
}

Modifikatoren für Verknüpfungen

Verknüpfte Nachrichten unterstützen Modifikatoren wie @.upper, um den verknüpften Wert umzuwandeln (Großschreibung, Kleinschreibung, Anfangsbuchstaben groß).

const en = {
  brand: "acme",
  banner: "@.upper:brand sale!", // "ACME sale!"
}

Kurze Überprüfung

Überprüfen Sie Ihr Verständnis von Pluralformen und Verknüpfungen.

Zusammenfassung

Sie haben Pluralformen und die Wiederverwendung von Nachrichten kennengelernt:

  • Trennen Sie Pluralformen mit |: "no items | one item | {count} items".
  • Übergeben Sie eine Anzahl an t(key, count), um die richtige Form auszuwählen.
  • Der Platzhalter {count} zeigt die Anzahl an.
  • Verknüpfte Nachrichten verwenden einen anderen Schlüssel über @:otherKey wieder (für verschachtelte Schlüssel mit @:(nested.key)).
  • Modifikatoren wie @.upper wandeln den verknüpften Wert um.

Häufig gestellte Fragen

Ist die Lektion „Pluralisierung und verknüpfte Nachrichten“ kostenlos?

Ja — der vollständige Text von „Pluralisierung und verknüpfte Nachrichten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Pluralisierung und verknüpfte Nachrichten“?

Pluralregeln mit der Syntax @:key|@:key, mengenabhängige Pluralformen und verknüpfte Nachrichten mit @:path Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Pluralisierung und verknüpfte Nachrichten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. vue-i18n einrichten und Nachrichtendateien
  2. useI18n-Composable und t()-Funktion
  3. Pluralisierung und verknüpfte Nachrichten
  4. Formatierung von Zahlen, Datumsangaben und Währungen
← Zurück zu Vue Academy