AppDividend
Latest Code Tutorials

Vue js Filters Tutorial

192

Vue js Filters Tutorial is the topic. A Vue.js filter is primarily a function that takes a value, processes it, and then returns the processed value. In the markup, it is denoted by a single pipe (|) and can be followed by one or more arguments. Filters should be appended to the end of the JavaScript expression, indicated by the “pipe” symbol:

Vue js Filters

Filters don’t transform the original data, they only change the output and return a filtered version of it. So we can chain the filters one by one. First filter’s output will become the second filter’s input, and the chain goes on and on. We can count filters as a primary Javascript function that processes the information and gives us an output.

Defining Vue.js Filters

We can register the Vue.js filters in two ways.

  1. Globally
  2. Locally

Global Vue.js Filter

The global filter gives us access to the filter across all of our components. So we directly bind our filter to Vue instance and use it in any Vue.js components.

Vue.filter('lowercase', function (value) {
    return value.toLowerCase();
});

// USAGE
<div id="app">
  <span>{{ krunal | lowercase }}</span>
</div>

Now, let us take an example of a Global filter. First, install the vue-cli and then generate a project.

Related Posts
1 of 5

Step 1: Create a Vue component.

First, create a component inside src  >>  components  >>  Fliter.vue file.

// Filter.vue

<template>
  <span>{{ name }}</span>
</template>
<script>

export default {
   data() {
      return {
         name: 'APPDIVIDEND'
      }
   }
}
</script>

Next step is to register the Filter at a global level. So go to the main.js file and register the filter.

Step 2: Register the Filter.

import Vue from 'vue'
import App from './App.vue'

Vue.filter('lowercase', function (value) {
  return value.toLowerCase();
});

Vue.config.productionTip = false

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

Here, I have registered at the global level, and now we can use any of the components of this application.

Now, add this component to the App.vue file.

// App.vue

<template>
  <div id="app">
    <Filter/>
  </div>
</template>

<script>
import Filterfrom './components/Filter.vue'

export default {
  name: 'app',
  components: {
    Filter
  }
}
</script>

Now, go the http://localhost:8080. You can see there is a word in the small letter. So our filter is applied successfully.

Local Vue.js Filter.

Local filters are registered to a Vue component scope. We can not use that filter outside that particular component. We can write the above example in a local filter as below. Remove the Vue.filter code inside the main.js file and add the following code to the Filter.vue file.

<template>
  <span>{{ name | lowercase }}</span>
</template>
<script>

export default {
   data() {
      return {
         name: 'APPDIVIDEND'
      }
   },
   filters: {
      lowercase(value) {
         return value.toLowerCase();
      }
   }
}
</script>

So, our Vue js Filters Tutorial is over. Thanks for taking.

 

 

Leave A Reply

Your email address will not be published.