Agregando formato a la moneda
Contenido del curso
Setup inicial
Vista
Gráfico
Modelo
Cierre
Agregando formato a la moneda
Contenido del curso
Agregando formato a la moneda
Cristian Diaz
Estudiante
Jose Ever Muñoz Muñoz
Estudiante
Jhon Anderson Alonso Hernandez
Estudiante
Frederick Bejarano Sanchez
Estudiante
Jose Morales Varon
Estudiante
Matías Daniel Cravero
Estudiante
David A. Casas Amézquita
Estudiante
Cristhian De la Cruz
Estudiante
Nestor Ignacio Rojas Guarachi
Estudiante
Patricia Janette Valdez Isasa
Estudiante
Jeremie Mckimsson García González
Estudiante
Antonio Jesús Cabrera López
Estudiante
Hans González
Estudiante
Miguel Angel Reyes Moreno
Estudiante
Darwin Rodríguez
Estudiante
Felix Torres Javier Antonio
Estudiante
Alvaro Eduardo Armijos Sarango
Estudiante
César Andrés Aguilar Párraga
Estudiante
Lev Merino
Estudiante
Ameth Ordoñez Erazo
Estudiante
Diana Martinez
EstudianteKaren Molina
EstudianteDiana Martinez
Estudiante
abiezer.reyes95
Estudianteabiezer.reyes95
Estudiante
Fabián Gabriel Soto Canales
EstudianteFormato para el peso colombiano
const currencyFormater = new Intl.NumberFormat(("es-CO"), { style: "currency", currency: "COP" })
excelente aporte
los que lo esten realizando con composition api no olviden el .value
const amountCurrency = computed(() => { return currencyFormatter.format(amountVisual.value); });
Gracias!!!
Para el formato de Bolívar Venezolano
< const currencyFormater = new Intl.NumberFormat("es-VE", { style: "currency", currency: "VES", }); >
Formato para el peso Argentino!
const currencyFormatter = new Intl.NumberFormat("es-AR", { style: "currency", currency: "ARS",
También pueden usar el método toLocaleString que tiene los Numbers, con los mismos parámetros que la profe comparte en el video, sería algo como:
amountVisual() { const amount = this.label ? this.amount : this.totalAmount; return amount.toLocaleString("es-CO", { style: "currency", currency: "COP" }); },
Lo que si deben de estar seguros es que la variable sobre la que estan trabajando, en este caso
amount, sea unNumber
Formato para nuevo sol moneda peruana!!!
const currencyFormatter = new Intl.NumberFormat("es-PE", { style: "currency", currency: "PEN", });
BOLIVIA
const currencyFormatter = new Intl.NumberFormat("es-BO", { style: "currency", currency: "BOL", });
Formato - Paraguay
const currencyFormatter = new Intl.NumberFormat("es-PY", { style: "currency", currency: "PYG", });
Para Guatemala :,v
const currencyFormater = new Intl.NumberFormat("es-GT", { style: "currency", currency: "GTQ", });
Dejo por aquí el de España por si alguien lo necesita
const currencyFormater = new Intl.NumberFormat("es-ES", { style: "currency", currency: "EUR", });
para formato de Guatemala
const currencyFormatter = new Intl.NumberFormat("es-GT",{ style:"currency", currency:"GTQ", });
Agregando formato a la moneda
Podemos darle formato de moneda a los números con JS vanilla:
const currencyFormatter = new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN", }); amountCurrency() { return currencyFormatter.format(this.amountVisual); }
Documentación para Intl.NumberFormat
amountVisual() { const monto = this.amount ?? this.totalAmount return monto.toLocaleString('es-VE', { style: 'currency', currency: 'VES', }) },
Faltaba el de mi México Lindo <3
const currencyFormatter = new Intl.NumberFormat("es-MX", { style: "currency", currency: "MXN", });
Para Ecuador:
const currencyFormatter = new Intl.NumberFormat("es-EC", { style: "currency", currency: "USD", });
Saludos desde Guayaquil :D
Formato para El Salvador
const currencyFormater = new Intl.NumberFormat("es-SV", { style: "currency", currency: "USD", });
Como podria agregar la función currency globalmente, por si la necesito en otro componente y no volverla a crear cada vez que la necesite?
Puedes crear una carpeta con el nombre que sea, como "helpers", dentro de la carpeta "src", y a partir de ahí crear todo el código en Vanilla JS que quieras importar en cualquier otro lado, puedes importarlo como cualquier otro módulo en JS.
Tengo una duda.
En la parte de los computer, para formatear el tipo de moneda. Estamos usando un computed exclusivo.
Pero puede hacerse de la siguiente manera?
amountVisual() { return this.amount !== null ? currencyFormatter.format(this.amount) : currencyFormatter.format(this.totalAmount); },
Habría una diferencia notoria en cuanto al performace de JS o algo por el estilo?
Todas las formas son válidas mientras funcionen, lo que va a cambiar es el contexto, puede que el performance sea secundario, o puede que no, todo eso ya depende de tu proyecto, como tal no tendría que afectar demasiado al performance lo que comentas, en Vue.js y para proyectos grandes es también muy importante la legibilidad y mantenibilidad del código.
<img height="341" width="309" src="https://static.platzi.com/media/user_upload/image-f12d8c3d-2a33-45d0-a834-7a640c48118e.jpg" />
Saludos, estoy tratando de solucionar este problema con prettier, me ha impedido continuar con el curso. Estoy buscando como solucionarlo.
Encontré la solución.
FORMATO CHILE
const currencyFormater = new Intl.NumberFormat(("es-CL"), { style: "currency", currency: "CLP"})