Vue.Js Filters

Vue.Js Filters: Filters are javascript functions which performs some operations on javascript object to represent it on view. In Vue.Js we use “pipe” symbol | to denote it. There are some filters in vue.Js which are mentioned below:

1. uppercase filter
2. lowecase filter
3. capitalize filter
4. currency
5. pluralize

Vue.Js Filters | Example

Here we are going to show an example by which you can easily understand working of uppercase filter.

Note:- The uppercase filter function has been deprecated so to avoid error use toUpperCase() to convert data value into capital.

<div id="app-2">
 

{{ message.toUpperCase() }}

 
</div>

Currency Filter | Example

Syntax

Following is newer syntax added into Vue.Js 2 version ‘£’ + price.toFixed(2)

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>--> 
<div>
 
</div>

Here we will discuss usage of currency filter by which any developer can save a lot time to display data in desired format. Below example shows prices of products in pound currency.

Capitalize Filter | Example

Syntax

Following is newer syntax added into Vue.Js 2 version text[0].toUpperCase() + text.slice(1)

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>--> 
<div>
 
</div>

It is very simple to use.Below example clears the concept of capitalize filter. As name suggests itself it will convert first small character in capital letter we we need in our program.

Filter’s Chaining | Example

Below example best explains the chaining of filters. It is very easy to add one filter after other.

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>--> 
<div>
 
</div>

Here we can see capitalize filter followed by currency filter which prints product name and their corresponding price values in pound.