Filters

Synopsis

A Vue.js filter is essentially a function that takes a value, processes it, and then returns the processed value. In the markup it is denoted by a single pipe (|) and can be followed by one or more arguments:

1

<element directive="expression | filterId [args...]"></element>

Examples

Filters must be placed at the end of a directive’s value:

1

<span v-text="message | capitalize"></span>

You can also use them inside mustache-style bindings:

1

<span>{{message | uppercase}}</span>

Multiple filters can be chained together:

1

<span>{{message | lowercase | reverse}}</span>

Arguments

Some filters can take optional arguments. Simply add arguments separated by spaces:

1

<span>{{order | pluralize st nd rd th}}</span>

1

<input v-on="keyup: submitForm | key enter">

For their specific use of the above examples see the full list of built-in filters.

Now that you know what directives and filters are, let’s get our hands dirty and try to display a list of items.