En esta octava lección del Curso de Vue.js, vas a aprender sobre el uso de los filtros en las interpolaciones y directivas de Vue.js y también aprenderás cómo crear tus propios filtros personalizados para tus aplicaciones.

Repositorio

Ver el código de esta lección en GitHub

Ten en cuenta que a partir de la versión 2 de Vue.js, los filtros se usan únicamente en las interpolaciones de texto. Para filtrar listados hay que usar computed properties como aprendemos en el Curso de Vue 2. Además Vue 2 no incluye ningún filtro predeterminado, estos deben agregarse de forma manual como aprendiste en esta lección (ve las notas debajo).

Notas

  • Documentación oficial de filtros en Vue.js
  • Para usar un filtro lo hacemos de esta manera:
  • Para registrar un filtro personalizado:

Actividades

  • Refactoriza la funcionalidad de nuestro ejemplo que muestra el nombre al revés del usuario, conviertiéndola en un filtro.
  • Divide el listado de experiencias en tecnologías del ejemplo en “Tienes experiencia con backend en:” y “Tienes experiencia con frontend en:”, agregando una nueva propiedad al objeto tech que permita diferenciarlas.
  • Crea un nuevo listado “Eres experto en:” si tiene más de 5 años de experiencia en alguna tecnología, esto usando filtros.
  • Por último, muestra un listado “No tienes experiencia en:” con las tecnologías donde el usuario no ha agregado experiencia.

Anímate a practicar y comparte tus avances en los comentarios o haciendo un Pull Request a nuestro repositorio en Github

Únete a la discusión

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

Material relacionado

Lección anterior Computed Properties en Vue.js Lección siguiente Repaso de interpolaciones, v-for, v-if, métodos y filtros con Vue.js