VueJS with Visual Studio Code— Filters

Hello and welcome to this tutorial on Vue.JS with Visual Studio Code. In this series of tutorials, we will see how we can work with Vue.JS with VS Code and learn more about Vue.JS.

Note: Live demo video down below.


Filters are used to format the output of string interpretation. Filters can be defined on the app level or the component level. Filters are easy to define and use.

First let’s add an Items array with different data so we can iterate through it and display it’s data. Just as follow:

Now, in the script section we will add a filters section just as we add any other sections like “methods” or “data. inside it we will add a filter just as we add any function to the method section. Let’s start with the capital filter:

If we look deeper into the “capital” filter we will notice that we are passing the “value” parameter which represent he value we want to do work on. After we do the work we want we return the “value” to display it.

Calling the filter is very simple, just add a pipe in the string interpolation to make the filter work and do the required operation:

<template>
<div class="filter">
<ul class="ul">
<li v-for="item in Items">
{{item.Id}} - {{item.Name | capital}} <!-- Here is the calling of filters -->
</li>
</ul>
</div>
</template>

Now if we run the app we will see the following output:

Yay! Output

Let’s add another filter to capitalize the first letter only:

capitalFirst:function(value){
return value.charAt(0).toUpperCase() + value.slice(1)
}

And this is our output:

Another successful build!

Can we chain or use different filters all together? Yes we can! let’s add another filter where we capitalize the last character:

capitalLast:function(value){
return  value.substring(0,value.length - 1) + value.charAt(value.length - 1).toUpperCase()
}

And here we go:

Hasta la vista baby

The final code of the component:

Live Demo:

please follow TutorialsXL on medium so you receive updates from our publication. Thanks for reading along, please Recommend this article to share knowledge.

Online training made simple by TutorialsXL.com. Join now and receive great online courses.

Windows IoT Core Development Course

https://tutorialsxl.com/courses/windows-iot-development/

Like what you read? Give Amr Swalha a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.