Updated April 3, 2023
Introduction to Vue.js filter
Vue.js filter is defined as Vue components that provide a functionality called filters to apply transformations or text formatting on any part of the data templates dynamically. The original content remains the same, and the changes are reflected at the output by returning filtered versions of data. A filter is done in two ways: built-in and custom filters. It does the filtration on the DOM level, which is re-usable and helps in changing the custom behavior to the different HTML elements.
Syntax
The Syntax is given as below, and it is pretty simple to use
<element directive="expression | pipe name"></element>sample:
<div>
Filters in Vue.js : {{ text | pipe name }}
</div>Filters are denoted by a pipe ( | ) and can be added with several arguments. The text can be static or from a variable.
How does the filter work in Vue.js?
Here let us see how to use Vue.js in the application by creating our filters and built-in.
The first thing to know about vue.js filters in the application is by defining a filter. It can be done either way as global and local. The global filter is available in all filters, and the local filter is defined only in the component. A filter is essentially a function that takes through value, does manipulation, and then displays processed values. The Vue component can be created in four different ways:
- New Vue
- Component
- Local components
- .vue files.
The Filters are created in two ways:
Local filter: Local filter occurs within the v-bind expressions, and a separate filter section is used. Let’s see a sample code.
{{message | toUpperCase}}
<div v-bind: text="message | toUpperCase"></div>We use v-bind directives here, which does a one-way data-binding mechanism.
In the case of larger projects, it is necessary to use the filters on several components. With that, we have created a filter in main.js, which says creating a separate file and placing all into it and lastly importing into the main.js file. Global filter is vue.filter().
Vue.filter('reverse', function (Val) {
return val.split('').reverse().join('')
})Multiple filters are used by denoting a comma operator in between the filters. Different built-in filters are capitalized Uppercase, lowercase, currency. Next comes the custom filters, which replace the built-in according to the user requirements. It is built on custom requirements.
Custom filter function
<script>
filters: {
// function declaration
}
};
</script>To handle complex functions, we must use complex components and properties. In this article, I have used Visual Studio code to execute the code. Before that, ensure Node.js has been installed and Setups a Server. Then, all the program sections are executed in App.vue and main.js. The IDE Looks like this:
To run the Code.
Do the below steps before debugging in Visual Studio.
To start the Localhost, type the following in the command prompt.
– C:\Users\Papitha\my-app> npm run serve
Examples of Vue.js filter
The First three Examples are executed in JSFiddle-Online Editor. The remaining code is done with Visual Studio.
Example #1
Implementing a Custom Filter
.html
<div id="req">
<ul>
<li v-for="Mobile in India">
{{ Mobile.name }} - {{ Mobile.priceamt | reduction | dollars }}
</li>
</ul>
</div>.js
Vue.filter('reduction', function (value) {
return value * 0.3
})
Vue.filter('dollars', function (value) {
return '$' + value.toFixed(2)
})
new Vue({
el: '#req',
data: {
India: [
{name: 'Samasung M31', priceamt: 22},
{name: 'Galaxy S10', priceamt: 16},
{name: 'Samasung M31', priceamt: 30},
{name: 'Galaxy Note 10', priceamt: 80},
{name: 'Redmi Note 9', priceamt: 60},
{name: 'Vivo V15', priceamt: 10},
{name: 'Apple iPhone 11', priceamt: 110}
]
}
})Explanation
A custom filter is created with a global filter by passing through a filter() function in the above code. Then, the filter returns the total value through a function.
Output:
Example #2
Implementation of Local Filter
.html
<div id="conv">
<span>{{ name | Upper }}</span>
</div>.js
new Vue({
el: '#conv',
data: {
name: 'educba.com'
},
filters: {
Upper(value) {
return value.toUpperCase();
}
}
});Explanation
The above code simply prints a name in the Upper Case, which is a good use case of a filter by making it lower or upper case. Here El is the DOM element. Therefore, the output looks like this:
Output:
Example #3
.html
<div id="total">
<h2>Brainy Calculator</h2>
<p><strong>Total: {{ client1 }}</strong></p>
<p> The 17% of Total amt is: {{ client1 | ss17 }}</p>
<p>The 30% of Total amt is: {{ client1 | ss30 }}</p>
<p> The 26% of Total amt is: {{ client1 | ss26 }}</p>
</div>.js
new Vue({
el: '#total',
data() {
return {
client1: 50.21
}
},
filters: {
ss17(value) {
return (value*.17).toFixed(2)
},
ss30(value) {
return (value*.30).toFixed(2)
},
ss26(value) {
return (value*.26).toFixed(2)
}
}
});Explanation
The above code snippet takes a filter for three values.
Output:
Example #4
Code:
<template>
<p>Hey {{ fname | fallback }}!</p>
</template>
<script>
export default {
data() {
return {
fname: 'Jenifer'
}
},
filters: {
fallback: function(fname) {
return fname ? fname : 'Good to see'
}
}
}
</script>Explanation
The above code checks a name that contains a value and displays the output as :
Output:
Example #5
Using Function argument in filters
Code:
<template>
<div class="calc">
Calculated value is : {{ value | multiplication(20) }}
</div>
</template>
<script>
export default {
name: "Passing parameters to filters",
data() {
return {
message: "Passing parameters to filters in vuejs",
value: 20
};
},
filters: {
multiplication: function(x, y) {
let res = x * y;
return res;
}
}
};
</script>Explanation:
In the above code, we have used a filter Multiplication that accepts an argument and return the result of two values. Next, this filter function is added to the Vue template with the div class. Here we have specified that an argument value has 20 and binds itself to give the result has 400. Now, we are finished with the code, and the output looks like this:
Output:
Conclusion
Therefore, we have discovered through this article how to create and use them in the program efficiently. And we learned how to refactor the code and make changes with the filters. Filters can also be chained and are invoked one after the other. Finally, this article helps to develop commercial Vue apps with the components.
Recommended Articles
This is a guide to the Vue.js filter. Here we discuss the introduction, syntax, and working of the filter in Vue.js along with different examples and code implementation. You may also have a look at the following articles to learn more –
