Vue Academy · Les

Getal-, datum- en valutaopmaak

n() voor getallen, d() voor datums, datum-tijdnotaties en numberFormats per locale.

Les 4 van 413 stappen

Getal-, datum- en valutaopmaak is een gratis Vue Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.

Getallen en datums verschillen per taalvariant

1,000.50 in de VS is 1.000,50 in een groot deel van Europa. Datums en valuta verschillen ook. Vue I18n wikkelt de browser-API's van Intl in, zodat getallen, datums en geldbedragen per taalvariant correct worden weergegeven.

numberFormats configureren

Definieer benoemde getalopmaken per taalvariant in de optie numberFormats van createI18n. Elke benoemde opmaak is een optiesobject voor Intl.NumberFormat.

const i18n = createI18n({
  locale: "en",
  numberFormats: {
    en: {
      currency: { style: "currency", currency: "USD" },
      decimal: { style: "decimal", minimumFractionDigits: 2 },
    },
  },
})

De functie n()

Maak een getal op met n(value, formatName) uit useI18n(), of met $n in templates. De functie gebruikt de benoemde opmaak voor de actieve taalvariant.

const { n } = useI18n()

n(1234.5, "decimal") // "1,234.50" in en

Valuta opmaken

De stijl currency voegt het juiste symbool en de juiste groepering toe. De valutacode in de opmaakconfiguratie bepaalt welk symbool wordt weergegeven.

const { n } = useI18n()

n(49.99, "currency") // "$49.99" in en

Valuta-uitvoer per taalvariant

Voeg dezelfde benoemde opmaak toe onder elke taalvariant, met instellingen die bij die taalvariant passen. Door locale te wijzigen veranderen de groepering, decimaaltekens en symboolpositie automatisch.

numberFormats: {
  en: { currency: { style: "currency", currency: "USD" } },
  tr: { currency: { style: "currency", currency: "TRY" } },
}
// n(49.99, "currency") => "$49.99" (en) or "TRY 49,99" style (tr)

Percentages

De stijl percent vermenigvuldigt met 100 en voegt per taalvariant een procentteken toe.

numberFormats: {
  en: { percent: { style: "percent", maximumFractionDigits: 1 } },
}

n(0.256, "percent") // "25.6%"

datetimeFormats configureren

Datumopmaak werkt hetzelfde als getalopmaak. Definieer benoemde opmaken onder datetimeFormats; elke opmaak is een optiesobject voor Intl.DateTimeFormat.

const i18n = createI18n({
  locale: "en",
  datetimeFormats: {
    en: {
      short: { year: "numeric", month: "short", day: "numeric" },
      long: { dateStyle: "full", timeStyle: "short" },
    },
  },
})

De functie d()

Maak een Date op met d(value, formatName) (of $d in templates). Geef een Date-object of een tijdstempel door.

const { d } = useI18n()

d(new Date("2026-05-29"), "short") // "May 29, 2026" in en

Datums per taalvariant

Geef net als bij getallen de benoemde datumopmaak per taalvariant op. Dezelfde aanroep levert een gelokaliseerde volgorde en maandnamen op wanneer de taalvariant verandert.

datetimeFormats: {
  en: { short: { year: "numeric", month: "short", day: "numeric" } },
  tr: { short: { year: "numeric", month: "short", day: "numeric" } },
}
// d(date, "short") => "May 29, 2026" (en) / "29 May 2026" (tr)

Opmaakhulpmiddelen in templates gebruiken

Gebruik in templates $n en $d met een waarde en de benoemde opmaak.

<template>
  <p>Total: {{ $n(total, "currency") }}</p>
  <p>Updated: {{ $d(updatedAt, "short") }}</p>
</template>

Eenmalige inline-opties

Naast benoemde opmaakprofielen kun je als tweede argument een inline-optieobject doorgeven voor een eenmalige opmaak, zonder het in de configuratie te definiëren.

const { n, d } = useI18n()

n(0.5, { style: "percent" })           // "50%"
d(new Date(), { weekday: "long" })     // "Friday"

Korte controle

Controleer of je opmaak op basis van landinstellingen begrijpt.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt geleerd hoe je opmaak op basis van landinstellingen gebruikt:

Configureer per landinstelling benoemde opmaakprofielen onder numberFormats en datetimeFormats.
n(value, name) / $n maakt getallen op in decimale, valuta- en percentage-indelingen.
d(value, name) / $d maakt datums op.
Als je de locale wijzigt, veranderen groepering, decimaaltekens, symbolen en datumvolgorde automatisch.
Je kunt ook een inline-optieobject doorgeven voor eenmalige opmaak.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 42
Lessen: 156

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Getal-, datum- en valutaopmaak” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Getal-, datum- en valutaopmaak”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.

Wat leer ik in “Getal-, datum- en valutaopmaak”?

n() voor getallen, d() voor datums, datum-tijdnotaties en numberFormats per locale. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Vue Academy te beginnen?

Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Getal-, datum- en valutaopmaak”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Vue Academy?

Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Vue Academy