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:
{{ msg | nombre-filtro }} - Para registrar un filtro personalizado:
Vue.filter('mi-filtro', function (value) { // devuelve el valor procesado })
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
Material relacionado
- Computed properties en Vue.js
- Introducción a los componentes con Vue.js
- Manejo de eventos y métodos con v-on:click y submit
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
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