Читать книгу Aprender VueJS con 100 ejercicios prácticos - Angel Vazquez Vazquez - Страница 25

Vamos a imaginarnos que tenemos nuestra interfaz que renderiza la lista de la compra que hemos realizado en anteriores ejercicios. Hemos sacado la aplicación que muestra la lista de la compra pero los usuarios se quejan de que se muestran en letras minúsculas y ellos quieren que se vea bien grande y se muestre en letras mayúsculas aun cuando ellos los introduzcan en minúsculas.[1]

Podremos modificar este comportamiento con una herramienta que pone a nuestra disposición Vue: los filtros.

Definiremos un filtro que pase a mayúsculas cada valor que se le pase en este caso de la siguiente forma:

Vue.filter(‘productName’, function(value){

if(!value) return ‘’

value = value.toString();

return value.toUpperCase();

});

Y en la declaración HTML lo haremos de la siguiente forma

<ul>

<li v-for=”product in shoppingList”>

{{ product | productName }}

/li>

</ul>

Esta notación es el típico pipe que es muy común y que en este caso se podría leer algo así como “a este valor la aplico esta función o transformación”.[2]