Creating the filters in Vue.js with examples
In this post we will give you information about Creating the filters in Vue.js with examples. Hear we will give you detail about Creating the filters in Vue.js with examplesAnd how to use it also give you demo for it if it is necessary.
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.
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.
<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
Local filters
Local filters can be created inside the filters object of a particular component.
<template> <div> <!-- using 'uppercase' filter --> <span><h1>{{ msg | uppercase }}</h1> </div></template><script>export default { data: function() { return { msg: "hello world" }; }, filters: { uppercase: function(value) { return value.toUpperCase(); } }};</script>output:
Chaning filters
We can also chain the filters, if we need to use the two filters for the same data.
<template> <div> <!-- using 'uppercase' and reverseData filter --> <span><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:
Hope this code and post will helped you for implement Creating the filters in Vue.js with examples. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs