Pluralización y mensajes vinculados
Reglas de pluralización, sintaxis @:key|@:key, pluralización basada en el conteo y mensajes vinculados con @:path
Pluralización y mensajes vinculados es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
El recuento depende del idioma
«1 item», pero «5 items»; además, otros idiomas tienen todavía más formas. Escribir los plurales directamente produce cadenas poco naturales como «5 item(s)». Vue I18n incorpora la pluralización para elegir la forma correcta según el recuento.
Formas plurales separadas por barras verticales
Escriba las formas en una sola cadena de mensaje, separadas por el carácter de barra vertical (|). En inglés, lo habitual es usar dos o tres formas.
const en = {
items: "no items | one item | {count} items",
}Seleccionar un plural con un recuento
Pase un número como segundo argumento a t. Vue I18n selecciona la forma correspondiente según el recuento.
const { t } = useI18n()
t("items", 0) // "no items"
t("items", 1) // "one item"
t("items", 9) // "9 items"La regla de pluralización predeterminada
Con tres formas, la regla es la siguiente: 0 usa la primera, 1 usa la segunda y cualquier otro valor usa la tercera. Con dos formas, 0 y los valores mayores se agrupan en la misma forma.
const en = {
// two-form version: 0 and N share the plural
files: "no file | one file | {count} files",
}El marcador de posición {count}
Dentro de un mensaje plural, el marcador de posición especial {count} (o {n}) se completa con el número que ha pasado, para que pueda mostrarlo.
const en = { photos: "no photos | {count} photo | {count} photos" }
t("photos", 3) // "3 photos"Plurales en las plantillas
En las plantillas, use $t con el recuento como segundo argumento, igual que en el script.
<template>
<p>{{ $t("items", cartCount) }}</p>
</template>Combinar el recuento y los valores con nombre
Puede pasar tanto un recuento como marcadores de posición con nombre proporcionando el recuento y un 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)¿Qué son los mensajes enlazados?
A veces una traducción debe incluir otra para evitar duplicaciones. Los mensajes enlazados hacen referencia a otra clave mediante la sintaxis @:.
const en = {
brand: "Acme",
welcome: "Welcome to @:brand",
}Resolver un enlace
Al traducir welcome, el token @:brand se sustituye por el valor traducido de brand. Cambie brand una sola vez y todos los mensajes enlazados se actualizarán.
t("welcome") // "Welcome to Acme"
// change brand -> all linked messages reflect itEnlazar con claves anidadas
Los enlaces también funcionan con claves anidadas separadas por puntos. Cuando sea necesario, escriba entre paréntesis las referencias de varias palabras.
const en = {
app: { name: "MyApp" },
footer: "Thanks for using @:(app.name)",
}Modificadores en los enlaces
Los mensajes enlazados admiten modificadores como @.upper para transformar el valor enlazado (upper, lower, capitalize).
const en = {
brand: "acme",
banner: "@.upper:brand sale!", // "ACME sale!"
}Comprobación rápida
Compruebe su comprensión de los plurales y los enlaces.
Resumen
Ha aprendido sobre los plurales y la reutilización de mensajes:
- Separe las formas plurales con
|:"no items | one item | {count} items". - Pase un recuento a
t(key, count)para seleccionar la forma correcta. - El marcador de posición
{count}muestra el número. - Los mensajes enlazados reutilizan otra clave mediante
@:otherKey(use@:(nested.key)para las claves anidadas). - Los modificadores como
@.uppertransforman el valor enlazado.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «Pluralización y mensajes vinculados» es gratis?
Sí — el texto completo de «Pluralización y mensajes vinculados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Pluralización y mensajes vinculados»?
Reglas de pluralización, sintaxis @:key|@:key, pluralización basada en el conteo y mensajes vinculados con @:path Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Pluralización y mensajes vinculados»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración de vue-i18n y archivos de mensajes
- Composable useI18n y función t()
- Pluralización y mensajes vinculados
- Formato de números, fechas y divisas