Uso de filtros en interpolaciones de texto en Vue.js 2

Vue.js permite el uso de filtros que pueden ser usados en las expresiones dentro de las interpolaciones de texto para alterar la presentación de éstas al momento de ser impresas en nuestro HTML.

Notas

Los filtros pueden ser usados dentro de las interpolaciones, separando nuestra expresión con el carácter pipe y luego el filtro que queremos usar:

Bienvenido {{ name | upper }}

Los filtros no son más que funciones de JavaScript que definimos dentro de nuestro objeto VM:

var vm = new Vue({
    //...
    filters: {
        upper: function (value) {
            return value.toUpperCase();
        }
    }
});

Es posible utilizar varios filtros a la vez. Por ejemplo, agregamos otro para concatenar una cadena de texto a una expresión:

filters: { 
    //... 
    title: function (value) { 
        return 'Mr. ' + value; 
    } 
}

Luego lo usamos junto con el filtro upper dentro de la interpolación:

Bienvenido {{ name | upper | title }}

Hay que tener en cuenta el orden de los filtros y colocarlos dependiendo del resultado que busquemos. En nuestro ejemplo anterior primero se convierte nuestra cadena de texto a mayúscula y luego se concatena la cadena Mr. Podemos cambiar el orden de los filtros para alterar esto:

Bienvenido {{ name | title | upper }}

Al ser funciones o métodos los filtros también aceptan argumentos. Por ejemplo podemos pasar Mr. como argumento al método title:

Bienvenido {{ name | title('Mr') | upper }}

Luego podemos recibir este argumento y concatenarlo, teniendo de esta forma un filtro dinámico:

filters: {
    //...
    title: function (value, title) {
        return title + '. ' + value;
    }
}

Podemos definir los filtros de forma global o de forma local. Si queremos definir un filtro de forma global lo hacemos con el uso de Vue.filter(), pasando como primer argumento el nombre de nuestro filtro y luego la función anónima con su lógica:

Vue.filter('title', function (value, title) {
     return title + '. ' + value;
});

Al definir un filtro de forma global este puede ser usado dentro de cualquier instancia de Vue que definamos.

Es importante tener en cuenta que Vue.js no viene con ningún filtro por defecto, estos deben ser definidos por nosotros mismos. Esto es debido a que JavaScript ya posee demasiadas librerías que nos permiten formatear cadenas de texto o números, como por ejemplo, Numeral.js.

Podemos incluir Numeral.js directamente en nuestra página haciendo uso del CDN:

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.4/numeral.min.js"></script>

Luego podemos definir un filtro y dentro de este hacer uso de Numeral.js.

Vue.filter('money', function (value) {
    return numeral(value).format('0,0');
});

Este filtro estará disponible para ser usado en nuestras interpolaciones:

{{ 9.99 | money }}

Filtros con v-bind

A partir de Vue 2.1.0, es posible usar filtros con v-bind:

<!-- en interpolacion -->
{{ name | upper }}

<!-- con v-bind -->
<img v-bind:title="name | upper">

<!-- o con la sintaxis corta: -->

<img :title="name | upper">

Sin embargo el uso de filtros en Vue 2 es más limitado que los métodos o computed properties, puesto que ahora sólo funcionan en interpolaciones y con la directiva v-bind.