# Filters

When displaying data on the template, you can format it in place. You can leverage filters to do so.

# Syntax

There are two places you can use the filters on your templates, one of them is in the mustache interpolations:

<div>
    {{ instanceProperty | myFilter }}
</div>

1
2
3

If you are curious, here's why we call them mustaches.

The second one is in v-bind expressions:

<div>
    <input type="text"
        :id="instanceProperty | myFilter"
        >
</div>

1
2
3
4
5

Notice in any case that we write a pipe (|) character and then follows the name of the filter, which has been defined in the configuration object like so:

new Vue({
    data: { ... },
    methods: { ... },
    computed: { ... },
    watch: { ... },
    filters: {
        myFilter(value) {
            // return the processed value
        }
    }

})

1
2
3
4
5
6
7
8
9
10
11
12

Filters can be chained, and that looks like:

<div>
    {{ instanceProperty | myFilter | filterTwo  }}
</div>

1
2
3

Be sure to checkout the pen below to discover how you can pass not only the value, but also arguments to your filters.

TIP

The guide has the same information I am describing here and on the pen, you can read it here.

# Example

See the Pen 03. Filters by @ackzell on CodePen.

← Watchers Components →