Introducción

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.

Instalar filtro

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:

Estamos listos para utilizarlo.

Registrar filtro

Ahora le tenemos que decir a VueJS que lo utilice. En nuestra app lo importamos y registramos:

Listo. Ahora podemos usarlo en nuestra vista.

Configurar filtro

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í:

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…

 

Utilizar filtro

Finalmente, en nuestra vista podemos utilizarlo. En mi caso lo implementé en una tabla:

Lo que da este resultado:

Y con eso terminamos por hoy.

Estoy interesado en trabajar contigo de manera remota para llevar tu idea a la realidad, formar parte de tu equipo de desarrolladores, ayudarte con tu tarea, dar asesorías y todo lo relacionado con tecnología y programación. Contáctame para más información
No te vayas sin seguirme en Twitter, Facebook y GitHub
Si tienes dudas déjalas en un comentario, pero asegúrate de seguirme antes como agradecimiento (no te cuesta nada y me ayudas mucho)


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB. Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron. Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scripts La plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C. Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

3 Comments

Acceder a los filtros de VueJS desde el código Javascript - Parzibyte's blog - El blog de Luis Cabrera · abril 30, 2018 a las 8:16 pm

[…] de Vue.js son muy útiles. Generalmente son utilizados sólo en la vista. Por ejemplo, si queremos filtrar moneda hacemos […]

Formatear moneda o dinero en Golang - Parzibyte's blog - El blog de Luis Cabrera · mayo 22, 2018 a las 5:38 pm

[…] Si quieres saber cómo hacerlo con VueJS aquí dejo un tutorial para ver cómo filtrar moneda o dinero en VueJS. […]

Convertir número a moneda en JavaScript - Parzibyte's blog · enero 2, 2019 a las 11:53 pm

[…] vimos un filtro de Vue.JS para transformar un número a moneda; es decir, de un número entero o flotante, obtener su representación legible para el ser […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: