Los filtros son una forma interesante de lidiar con la representación de datos en Vue, pero solo son útiles en una pequeña cantidad de casos. Lo primero que debe comprender acerca de los filtros es que no reemplazan métodos, valores calculados o observadores, porque los filtros no transforman los datos, solo la salida que ve el usuario. A partir de Vue 2.0, no hay filtros integrados, tenemos que construirlos nosotros mismos.
Podemos usar filtros a nivel local o global, pero vale la pena mencionar que si declara un filtro Vue globalmente, debe ir antes de la instancia de Vue. En ambos casos, pasaríamos el valor como parámetro.
//global
Vue.filter('filterName', function(value) {
return // thing to transform
});
//locally, like methods or computed
filters: {
filterName(value) {
return // thing to transform
}
}Los filtros se utilizan con una tubería, siguiendo la pieza de datos que le gustaría modificar al renderizar. Entonces mostraríamos el dato que queremos modificar, seguido del filtro
{{ data | filter }}Aquí hay un pequeño ejemplo, con una calculadora de propinas:
Consulte los filtros de lápiz de Sarah Drasner (@sdras) en CodePen.
new Vue({
el: '#app',
data() {
return {
customer1total: 35.43
}
},
filters: {
tip15(value) {
return (value*.15).toFixed(2)
},
tip20(value) {
return (value*.2).toFixed(2)
},
tip25(value) {
return (value*.25).toFixed(2)
}
}
});<div id="app">
<h2>Tip Calculator</h2>
<p><strong>Total: {{ customer1total }}</strong></p>
<p>15%: {{ customer1total | tip15 }}</p>
<p>20%: {{ customer1total | tip20 }}</p>
<p>25%: {{ customer1total | tip25 }}</p>
</div>También puede utilizar filtros en v-bind directivas en lugar de solo la plantilla del bigote. Los filtros también se pueden encadenar. Tenga en cuenta que si va a encadenar filtros: el pedido es importante. El primer filtro se aplicará primero, el segundo se aplicará al primero completado, y así sucesivamente.
{{ data | filterA | filterB }}También podemos pasar argumentos adicionales a filtros así:
{{ data | filterName(arg1, arg2) }}// locally, like methods or computed
filters: {
filterName(value, arg1, arg2) {
return //thing to transform
}
}Ahora, podría pensar, según el nombre, que los filtros serían excelentes para formularios cuando queremos mostrar solo algunos bits de datos y no otros. Sin embargo, los filtros deben volver a ejecutarse en cada actualización, por lo que si tiene algo como una entrada que se actualiza cada vez que escribe, no es muy eficaz. Mejor usar computed para algo como esto, ya que tiene menos gastos generales. Los resultados se almacenarán en caché en función de sus dependencias y no se volverán a ejecutar en cada actualización. Las propiedades calculadas solo se reevaluarán cuando esas dependencias cambien, pero también pueden manejar lógica compleja. Esto los convierte en excelentes candidatos para filtrar información en función de las entradas. Sin embargo, existen circunstancias en las que es necesario actualizar en función de los cambios en el tiempo y, para estos casos, es mejor utilizar un method.