Vue.js filter

Filters are the way Vue.js allows us to apply formatting and transformations to the values used in template interpolation.

Filters are functions provided by Vue components that allow you to apply formatting and transformations to any part of the template's dynamic data.

They do not change component data or anything, but only affect the output.

Suppose you are printing the name:

<template>
  <p>Hi {{ name }}!</p>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
}
}
</script>

What to do if you want to checknameActually contains a value. If it is not displayed, the template will display "Hi there!"?

Input filter:

<template>
  <p>Hi {{ name | fallback }}!</p>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
},
filters: {
fallback: function(name) {
return name ? name : ‘there’
}
}
}
</script>

Please pay attention to the syntax of applying the filter, i.e.| filterName. If you are familiar with Unix, it is the Unix pipe operator, which is used to pass the output of an operation as input to the next operation.

ThisfiltersThe attribute of the component is an object. A single filter is a function that accepts one value and returns another value.

The returned value is the value actually printed in the Vue.js template.

Filters can of course access component data and methods.

What are good use cases for filters?

Convert a string, for example, uppercase or lowercase
Format price

Above, you saw a simple filter example:{{ name | fallback }}.

Filters can be chained by repeating the pipeline syntax:

{{ name | fallback | capitalize }}

This applies first of allfallbackFilter and thencapitalizeFilter (we haven't defined it yet, but please try to create one!).

Advanced filters can also accept parameters using regular function parameter syntax:

<template>
  <p>Hello {{ name | prepend('Dr.') }}</p>
</template>
<script>
export default {
data() {
return {
name: ‘House’
}
},
filters: {
prepend: (name, prefix) => {
return </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">prefix</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
}
}
}
</script>

If you pass parameters to the filter, the first parameter passed to the filter function is always the template interpolation (name(In this case), then the explicit parameters you pass.

You can use multiple parameters by separating them with commas.

Note that I used the arrow function. We usually avoid using arrow functions in methods and calculated properties because they almost always referencethisTo access the component data, but in this case, the filter does not need to access it, but receives all the data it needs through parameters, and we can safely use the simpler arrow function syntax.

This bagThere are many pre-made filters for you to use directly in the template, includingcapitalize,uppercase,lowercase,placeholder,truncate,currency,pluralizeAnd more.

Download mine for freeVue manual

Vue.js filter

Filters are the way Vue.js allows us to apply formatting and transformations to the values used in template interpolation.

More vue tutorials: