Vue.js permite el uso de filtros que pueden ser usados en las expresiones dentro de las interpolaciones de texto para alterar la presentación de éstas al momento de ser impresas en nuestro HTML. 

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Notas

Los filtros pueden ser usados dentro de las interpolaciones, separando nuestra expresión con el carácter pipe y luego el filtro que queremos usar:

Los filtros no son más que funciones de JavaScript que definimos dentro de nuestro objeto VM:

Es posible utilizar varios filtros a la vez. Por ejemplo, agregamos otro para concatener una cadena de texto a una expresión:

Luego lo usamos junto con el filtro upper dentro de la interpolación:

Hay que tener en cuenta el orden de los filtros y colocarlos dependiendo del resultado que busquemos. En nuestro ejemplo anterior primero se convierte nuestra cadena de texto a mayúscula y luego se concatena la cadena Mr. Podemos cambiar el orden de los filtros para alterar esto:

Al ser funciones o métodos los filtros también aceptan argumentos. Por ejemplo podemos pasar Mr. como argumento al método title:

Luego podemos recibir este argumento y concatenarlo, teniendo de esta forma un filtro dinámico:

Podemos definir los filtros de forma global o de forma local. Si queremos definir un filtro de forma global lo hacemos con el uso de Vue.filter(), pasando como primer argumento el nombre de nuestro filtro y luego la función anónima con su lógica:

Al definir un filtro de forma global este puede ser usado dentro de cualquier instancia de Vue que definamos.

Es importante tener en cuenta que Vue.js no viene con ningún filtro por defecto, estos deben ser definidos por nosotros mismos. Esto es debido a que JavaScript ya posee demasiadas librerías que nos permiten formatear cadenas de texto o números, como por ejemplo, Numeral.js.

Podemos incluir Numeral.js directamente en nuestra página haciendo uso del CDN:

Luego podemos definir un filtro y dentro de este hacer uso de Numeral.js.

Este filtro estará disponible para ser usado en nuestras interpolaciones:

Filtros con v-bind

A partir de Vue 2.1.0, es posible usar filtros con v-bind:

Sin embargo el uso de filtros en Vue 2 es más limitado que los métodos o computed properties, puesto que ahora sólo funcionan en interpolaciones y con la directiva v-bind.

Material relacionado

Únete a la discusión

Regístrate en Styde y obtén una invitación a nuestro Slack.

Lección anterior Manejo de eventos en Vue.js 2 Lección siguiente Diferencias entre métodos, computed properties y filtros en Vue.js 2