Agregando formato a la moneda

Contenido del curso

Introducción

Setup inicial

Vista

Gráfico

Modelo

Cierre

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:12

Agregando formato a la moneda

Curso Práctico de Vue.js

Clase 7 de 21

Clase 7 / 21

Comentarios (25)25 comentarios

Cristian Diaz

Hace 4 años

Formato para el peso colombiano

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

Jose Ever Muñoz Muñoz

Hace 3 años

excelente aporte

Jhon Anderson Alonso Hernandez

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

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

Frederick Bejarano Sanchez

Gracias!!!

Jose Morales Varon

Para el formato de Bolívar Venezolano

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

Matías Daniel Cravero

Hace 5 años

Formato para el peso Argentino!

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

David A. Casas Amézquita

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

Cristhian De la Cruz

Formato para nuevo sol moneda peruana!!!

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

Nestor Ignacio Rojas Guarachi

BOLIVIA

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

Patricia Janette Valdez Isasa

Formato - Paraguay

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

Jeremie Mckimsson García González

Para Guatemala :,v

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

Antonio Jesús Cabrera López

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

para formato de Guatemala

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

Miguel Angel Reyes Moreno

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

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

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

Felix Torres Javier Antonio

Faltaba el de mi México Lindo <3

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

Alvaro Eduardo Armijos Sarango

Para Ecuador:

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

César Andrés Aguilar Párraga

Saludos desde Guayaquil :D

Lev Merino

Formato para El Salvador

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

Ingrid Gallegos

Para Ecuador

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

Seba Cardoso

Hace 4 meses

muy bueno

Ameth Ordoñez Erazo

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

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

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.

abiezer.reyes95

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

Encontré la solución.

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?

Agregando formato a la moneda

Progreso del curso

Introducción

Setup inicial

Vista

Gráfico

Modelo

Cierre