Vue.js es un framework poderoso pero liviano. Por lo tanto, no viene con cosas innecesarias, los filtros son un ejemplo de ello. En las aplicaciones que desarrollamos, no siempre necesitaremos el filtro currency o de dinero.
Pero habrá algunas ocasiones en las que sí lo necesitaremos, ¿y para qué reinventar la rueda, si alguien más ya lo hizo por nosotros? así que hoy veremos cómo utilizar el filtro de moneda en VueJS.
Esto es muy fácil. Simplemente instalamos el filtro que está aquí en GitHub. En mi caso lo haré con NPM.
Para ello, ejecutamos lo siguiente:
npm install --save vue-currency-filter
Estamos listos para utilizarlo.
Ahora le tenemos que decir a VueJS que lo utilice. En nuestra app lo importamos y registramos:
import VueCurrencyFilter from 'vue-currency-filter'
Vue.use(VueCurrencyFilter)
Listo. Ahora podemos usarlo en nuestra vista.
Por defecto, el filtro convierte algo como “589623.54” en “$ 589.624”. Si utilizamos euros, un distinto separador o cosas de esas podemos crear una configuración global al registrarlo. Para ello, pasamos un objeto como segundo argumento. Así:
Vue.use(VueCurrencyFilter,
{
symbol : '$',
thousandsSeparator: '.',
fractionCount: 2,
fractionSeparator: ',',
symbolPosition: 'front',
symbolSpacing: true
})
En mi caso, necesito que se filtre como en mi país se hace. En donde algo como “5369.22” se convierte en “$5,369.22” así que…
Vue.use(VueCurrencyFilter, {
symbol: '$', // El símbolo, por ejemplo €
thousandsSeparator: ',', // Separador de miles
fractionCount: 2, // ¿Cuántos decimales mostrar?
fractionSeparator: '.', // Separador de decimales
symbolPosition: 'front', // Posición del símbolo. Puede ser al inicio ('front') o al final ('') es decir, si queremos que sea al final, en lugar de front ponemos una cadena vacía ''
symbolSpacing: true // Indica si debe poner un espacio entre el símbolo y la cantidad
})
Finalmente, en nuestra vista podemos utilizarlo. En mi caso lo implementé en una tabla:
<td class="sueldo-empleado">{{sueldoDelEmpleadoConElIndice(i) | currency}}</td>
Lo que da este resultado:
Y con eso terminamos por hoy.
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…
Esta web usa cookies.
Ver comentarios