by Sai gowtham

Creating the filters in Vue.js with examples

In this tutorial, we are going to learn about how to create the filters in vue.js with the help of examples.

Filters

In vue filters helps us to transform the output rendering of a data.

Filters are used in two places:

  • Musthache Interploations {{ }}.
  • v-bind expressions.

Creating filters

In Vue, we can create two types of filters which are global and local filters.

Global Filters : We can access global filters throughout our Vue app.

Local Filters : We can only access local filters within a component.

Global Filters

Let’s create a global filter called reverseData which is used to reverse the provided string.

Note: Global filters are created before the root vue instance.

main.js
import Vue from "vue";
import App from "./App.vue";

Vue.filter("reverseData", function(value) {
  return value
    .split("")
    .reverse()
    .join("");
});

new Vue({
  render: h => h(App)
}).$mount("#app");

Using the filter

Filters can be used with the pipe symbol | filterName.

App.vue
<template>
  <div id="app">
    <h1>{{ name | reverseData }}</h1>  </div>
</template>

<script>
export default {
  data:function() {
    return {
      name: "sai"
    };
  }
};
</script>

Now our output rendering data is transformed from sai to ias

filters-vue

Local filters

Local filters can be created inside the filters object of a particular component.

Dummy.vue
<template>
  <div>
    <!-- using `uppercase` filter -->
    <h1>{{ msg | uppercase }}</h1>  </div>
</template>

<script>
export default {
  data: function() {
    return {
      msg: "hello world"
    };
  },  filters: {    uppercase: function(value) {      return value.toUpperCase();    }  }
};
</script>

output: local-filters-vuejs

Chaning filters

We can also chain the filters, if we need to use the two filters for the same data.

Dummy.vue
<template>
  <div>
    <!-- using `uppercase` and reverseData filter -->
    <h1>{{ msg | uppercase | reverseData }}</h1>  </div>
</template>

<script>
export default {
  data: function() {
    return {
      msg: "hello world"
    };
  },
  filters: {
    uppercase: function(value) {
      return value.toUpperCase();
    }
  }
};
</script>

In the above code, we chained two filters msg | uppercase | reverseData.

output:

chaining-vue-filters

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course