How to Use Filters in Vue.js
Today we are going to learn how to use filters in Vue.js. Let’s get started:
Table of Contents
Understanding Filters
Vue.js allows us to define filters that can be used to apply common text formatting. We can use filters globally or locally. The syntax:
// global
Vue.filter('filterName', function(value) {
return // the data to filter
});
// locally, like methods or mounted
filters: {
filterName(value) {
return // the data to filter
}
}
Filters are usable in two places: mustache interpolations and v-bind
expressions.
<!-- in mustaches -->
{{ data | filterName }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
Global Filters
We’ve to define a filter globally before creating the Vue instance:
import Vue from 'vue'
import App from './App.vue'
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
render: h => h(App),
}).$mount('#app')
<template>
<div id="app">
<!-- using `capitalize` filter -->
<h1>{{ name | capitalize }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
name: "obydul",
}
}
};
</script>
Local Filters
We have to define local filters in the component’s options:
<template>
<div id="app">
<!-- using `uppercase` filter -->
<h1>{{ name | capitalize }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
name: "obydul",
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
};
</script>
More Info
We can also pass additional arguments into filters:
// filtering
{{ data | filterName(arg1, arg2) }}
// make filter
filters: {
filterName(value, arg1, arg2) {
return //thing to transform
}
}
Now, let’s take a look at some examples:
Reverse String:
filters: {
reverseString: function (value) {
return value.split("").reverse().join("");
}
}
Uppercase:
filters: {
uppercase: function (value) {
return value.toUpperCase();
}
}
Filters can be chained:
{{ message | filterA | filterB }}
That’s all. I hope you’ve got some idea about Vue.js filters.
Comment
Preview may take a few seconds to load.
Markdown Basics
Below you will find some common used markdown syntax. For a deeper dive in Markdown check out this Cheat Sheet
Bold & Italic
Italics *asterisks*
Bold **double asterisks**
Code
Inline Code
`backtick`Code Block```
Three back ticks and then enter your code blocks here.
```
Headers
# This is a Heading 1
## This is a Heading 2
### This is a Heading 3
Quotes
> type a greater than sign and start typing your quote.
Links
You can add links by adding text inside of [] and the link inside of (), like so:
Lists
To add a numbered list you can simply start with a number and a ., like so:
1. The first item in my list
For an unordered list, you can add a dash -, like so:
- The start of my list
Images
You can add images by selecting the image icon, which will upload and add an image to the editor, or you can manually add the image by adding an exclamation !, followed by the alt text inside of [], and the image URL inside of (), like so:
Dividers
To add a divider you can add three dashes or three asterisks:
--- or ***

Comments (0)