Agregando formato a la moneda

Clase 7 de 21 • Curso Práctico de Vue.js

Cristian Diaz

student•

Formato para el peso colombiano

const currencyFormater = new Intl.NumberFormat(("es-CO"), {
  style: "currency", currency: "COP"
})

Jose Ever Muñoz Muñoz

student•

excelente aporte

Jhon Anderson Alonso Hernandez

student•

los que lo esten realizando con composition api no olviden el .value

const amountCurrency = computed(() => {
  return currencyFormatter.format(amountVisual.value);
});

Frederick Bejarano Sanchez

student•

Gracias!!!

Jose Morales Varon

student•

Para el formato de Bolívar Venezolano

<
const currencyFormater = new Intl.NumberFormat("es-VE", {
  style: "currency",
  currency: "VES",
});
>

Matías Daniel Cravero

student•

Formato para el peso Argentino!

const currencyFormatter = new Intl.NumberFormat("es-AR", {
 style: "currency",
 currency: "ARS",

David A. Casas Amézquita

student•

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 un Number

Platzi Team

student•

Formato para nuevo sol moneda peruana!!!

const currencyFormatter = new Intl.NumberFormat("es-PE", {
  style: "currency",
  currency: "PEN",
});

Nestor Ignacio Rojas Guarachi

student•

BOLIVIA

const currencyFormatter = new Intl.NumberFormat("es-BO", { style: "currency", currency: "BOL", });

Patricia Janette Valdez Isasa

student•

Formato - Paraguay

const currencyFormatter = new Intl.NumberFormat("es-PY", {
  style: "currency",
  currency: "PYG",
});

Jeremie Mckimsson García González

student•

Para Guatemala :,v

const currencyFormater = new Intl.NumberFormat("es-GT", {
  style: "currency",
  currency: "GTQ",
});

Antonio Jesús Cabrera López

student•

Dejo por aquí el de España por si alguien lo necesita

const currencyFormater = new Intl.NumberFormat("es-ES", {
  style: "currency",
  currency: "EUR",
});

Hans González

student•

para formato de Guatemala

const currencyFormatter = new Intl.NumberFormat("es-GT",{
    style:"currency",
    currency:"GTQ",
});

Miguel Angel Reyes Moreno

student•

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

Darwin Rodríguez

student•

amountVisual() {
      const monto = this.amount ?? this.totalAmount

      return monto.toLocaleString('es-VE', {
        style: 'currency',
        currency: 'VES',
      })
},

Felix Torres Javier Antonio

student•

Faltaba el de mi México Lindo <3

const currencyFormatter = new Intl.NumberFormat("es-MX", {
  style: "currency",
  currency: "MXN",
});

Alvaro Eduardo Armijos Sarango

student•

Para Ecuador:

const currencyFormatter = new Intl.NumberFormat("es-EC", {
  style: "currency",
  currency: "USD",
});

César Andrés Aguilar Párraga

student•

Saludos desde Guayaquil :D

Lev Merino

student•

Formato para El Salvador

const currencyFormater = new Intl.NumberFormat("es-SV", {
	style: "currency",
	currency: "USD",
});

Ameth Ordoñez Erazo

student•

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?

Diana Martinez

student•

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.

Karen Molina

student•

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?

Diana Martinez

student•

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.

abiezer.reyes95

student•

Saludos, estoy tratando de solucionar este problema con prettier, me ha impedido continuar con el curso. Estoy buscando como solucionarlo.

abiezer.reyes95

student•

Encontré la solución.

Fabián Gabriel Soto Canales

student•

FORMATO CHILE

const currencyFormater = new Intl.NumberFormat(("es-CL"), { style: "currency", currency: "CLP"})

Agregando formato a la moneda

Introducción

Construye una aplicación para el control de tus gastos con Vue.js

Creación del proyecto

Setup inicial

Splashscreen

Header y contenido

Layout

Vista

Resumen de datos

Agregando formato a la moneda

Componente del historial

Lista del historial

El botón para agregar

Formulario para agregar

Gráfico

Creación del SVG del gráfico

Creación de las coordenadas en el gráfico

Creación de la lógica del gráfico

Creando la interacción con el gráfico

Modelo

Modelo de datos

Agregar y quitar

Persistencia del modelo

Últimos detalles de nuestra aplicación

Cierre

Poniendo nuestra aplicación en producción en Netlify

¿Quieres más cursos de Vue?