PricingLoginStart free
Vue Academy · Aula

Pluralização e mensagens vinculadas

Regras de plural @:key|@:key, pluralização baseada em contagem e mensagens vinculadas com @:path.

Aula 3 de 413 etapas

Pluralização e mensagens vinculadas é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

A contagem depende do idioma

"1 item", mas "5 itens" — e outros idiomas têm ainda mais formas. Plurais inseridos diretamente no código geram strings estranhas, como "5 item(ns)". O Vue I18n tem pluralização integrada para escolher a forma correta de acordo com uma contagem.

Formas de plural separadas por barra vertical

Escreva as formas em uma única string de mensagem, separadas pelo caractere de barra vertical (|). Em inglês, duas ou três formas são comuns.

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

Selecionando um plural com uma contagem

Passe um número como segundo argumento para t. O Vue I18n escolhe a forma correspondente com base na contagem.

const { t } = useI18n()

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

A regra de plural padrão

Com três formas, a regra é: 0 usa a primeira, 1 usa a segunda e qualquer outro valor usa a terceira. Com duas formas, 0 e muitos valores são agrupados.

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

O espaço reservado {count}

Dentro de uma mensagem com plural, o espaço reservado especial {count} (ou {n}) é preenchido com o número passado, para que você possa exibir esse valor.

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

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

Plurais nos modelos

Nos modelos, use $t com a contagem como segundo argumento, assim como no script.

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

Combinando contagens e valores nomeados

Você pode passar uma contagem e espaços reservados nomeados fornecendo a contagem junto com um objeto de valores.

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)

O que são mensagens vinculadas?

Às vezes, uma tradução deve incorporar outra para evitar duplicação. Mensagens vinculadas referenciam outra chave com a sintaxe @:.

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

Resolvendo um vínculo

Ao traduzir welcome, o token @:brand é substituído pelo valor traduzido de brand. Altere brand uma vez e todas as mensagens vinculadas serão atualizadas.

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

Vinculando com chaves aninhadas

Os vínculos também funcionam com chaves aninhadas separadas por pontos. Coloque referências com várias palavras entre parênteses quando necessário.

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

Modificadores em vínculos

As mensagens vinculadas aceitam modificadores como @.upper para transformar o valor vinculado (maiúsculas, minúsculas, inicial maiúscula).

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

Verificação rápida

Verifique sua compreensão sobre plurais e vínculos.

Responda na aula interativa

Recapitulação

Você aprendeu sobre plurais e reutilização de mensagens:

  • Separe as formas de plural com |: "no items | one item | {count} items".
  • Passe uma contagem para t(key, count) para escolher a forma correta.
  • O espaço reservado {count} exibe o número.
  • Mensagens vinculadas reutilizam outra chave por meio de @:otherKey (com @:(nested.key) para chaves aninhadas).
  • Modificadores como @.upper transformam o valor vinculado.
Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos
42
Aulas
156
Começar a aprender grátisVer o curso completo

Perguntas Frequentes

A aula “Pluralização e mensagens vinculadas” é grátis?

Sim — o texto completo de “Pluralização e mensagens vinculadas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Pluralização e mensagens vinculadas”?

Regras de plural @:key|@:key, pluralização baseada em contagem e mensagens vinculadas com @:path. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Pluralização e mensagens vinculadas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Configuração do vue-i18n e arquivos de mensagens
  2. Composable useI18n e função t()
  3. Pluralização e mensagens vinculadas
  4. Formatação de números, datas e moedas
← Voltar para Vue Academy