Vue Academy · Lektion

Pluralisering och länkade meddelanden

Pluralregler med syntaxen @:key|@:key, mängdbaserad pluralisering och länkade meddelanden med @:path.

Lektion 3 av 413 steg

Pluralisering och länkade meddelanden är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Räkning är språkspecifik

"1 objekt" men "5 objekt" — och andra språk har ännu fler former. Hårdkodade pluralformer leder till konstiga strängar som "5 objekt(er)". Vue I18n har inbyggd pluralisering som väljer rätt form utifrån ett antal.

Pluralformer separerade med pipe

Skriv formerna i en och samma meddelandesträng, separerade med pipe-tecknet (|). För engelska är två eller tre former vanligt.

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

Välja plural med ett antal

Skicka ett tal som det andra argumentet till t. Vue I18n väljer den matchande formen utifrån antalet.

const { t } = useI18n()

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

Den förvalda pluralregeln

Med tre former är regeln: 0 använder den första, 1 använder den andra och alla andra tal använder den tredje. Med två former slås 0 och många ihop.

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

Platshållaren {count}

I ett pluralmeddelande fylls den särskilda platshållaren {count} (eller {n}) i med talet du skickade, så att du kan visa antalet.

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

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

Pluralformer i mallar

I mallar använder du $t med antalet som det andra argumentet, precis som i script.

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

Kombinera antal och namngivna värden

Du kan skicka både ett antal och namngivna platshållare genom att ange antalet samt ett värdeobjekt.

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)

Vad är länkade meddelanden?

Ibland bör en översättning bädda in en annan för att undvika duplicering. Länkade meddelanden refererar till en annan nyckel med syntaxen @:.

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

Lösa en länk

När du översätter welcome ersätts token @:brand med det översatta värdet för brand. Ändra brand en gång så uppdateras alla länkade meddelanden.

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

Länka med nästlade nycklar

Länkar fungerar även med punktseparerade nästlade nycklar. Om det behövs omger du referenser med flera ord med parenteser.

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

Modifierare för länkar

Länkade meddelanden stöder modifierare som @.upper för att omvandla det länkade värdet (versaler, gemener eller inledande versal).

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

Snabbkontroll

Kontrollera din förståelse av pluralformer och länkar.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har lärt dig om pluralformer och återanvändning av meddelanden:

Separera pluralformer med |: "no items | one item | {count} items".
Skicka ett antal till t(key, count) för att välja rätt form.
Platshållaren {count} visar antalet.
Länkade meddelanden återanvänder en annan nyckel via @:otherKey (med @:(nested.key) för nästlade nycklar).
Modifierare som @.upper omvandlar det länkade värdet.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Pluralisering och länkade meddelanden” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Pluralisering och länkade meddelanden”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Pluralisering och länkade meddelanden”?

Pluralregler med syntaxen @:key|@:key, mängdbaserad pluralisering och länkade meddelanden med @:path. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Pluralisering och länkade meddelanden”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Konfigurera vue-i18n och meddelandefiler
useI18n-composable och funktionen t()
Pluralisering och länkade meddelanden
Formatering av tal, datum och valutor

← Tillbaka till Vue Academy