Los filtros son en realidad una función proporcionada por Vue.js que le permite aplicar un formato de texto común a sus datos. Los filtros NO cambian los datos en sí, sino que cambian la salida al navegador al devolver una versión filtrada de esos datos.
La mayoría de los desarrolladores de VueJS están extremadamente familiarizados con las propiedades computadas. Son una excelente manera de diseñar un código más legible y ordenar su plantilla.
Sin embargo, en ciertos casos, hay una solución mejor que puede hacer que el código sea aún más reutilizable: los filtros VueJS. En este tutorial, aprenderá a usar filtros Vue.js personalizados dentro del componente Vue.
Supongamos que ha creado un filtro personalizado ( uppercase) que transforma el texto en mayúsculas. Puede ser un filtro global o local.
Ahora, así es como podemos usar filtros: ya sea en interpolaciones de bigote Hey {{ username | capitalize }} O en una expresión v-bind (observe la tubería en ambos).
<!-- With mustache interpolations -->
<h1>{{ article.title | uppercase }}</h1>
<!-- With v-bind expression -->
<title-component :title="article.title | uppercase" />
Puede definir un filtro como global (disponible en todos los componentes) o local (solo en el componente en el que está definido). Así es como definiría un filtro local :
export default {
filters: {
capitalize: function(value) {
if (!value) {
return "";
}
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
};
Cree un archivo separado donde almacene sus filtros. Para proyectos pequeños, generalmente los almacenaba en una carpeta llamada helpers.
import Vue from "vue";
Vue.filter("capitalize", function(value) {
if (!value) {
return "";
}
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
});
Luego, simplemente importe este archivo en su punto de entrada de Vue (generalmente: main.js).
import "@/helpers/filters";
También es posible aplicar múltiples filtros a un solo valor.
Esto es bastante intuitivo. Todo lo que tenemos que hacer es insertar otro "tubo" después de nuestro primer filtro y luego declarar nuestro segundo filtro. Algo como esto.
<h1>{{ name | upper | lower }}</h1>
Ahora, ambas transformaciones de texto se aplican a nuestros datos originales.
Dado que los filtros son funciones de JavaScript, aceptan el valor a transformar como primer parámetro. También puede pasar tantos argumentos como necesite de acuerdo con las necesidades de su aplicación.
<h1>{{ message | filterA('arg1', arg2) }}</h1>
Así como podemos pasar varios argumentos, es posible vincular varios filtros, para eso solo necesitamos usar el símbolo de barra vertical (|) y a través de varios filtros transformantes, obtenemos un solo valor.