<[object Object] defer="true" src="https://static.cloudflareinsights.com/beacon.min.js" token="0a1dcfae6c4348e2aa2d13c20d9fe61d">

# 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.

Last Updated: 3/24/2022, 12:13:05 AM