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 checkname
Actually 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.
Thisfilters
The 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 allfallback
Filter and thencapitalize
Filter (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 referencethis
To 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
,pluralize
And more.
Download mine for freeVue manual
More vue tutorials:
- Vue.js overview
- Vue.js CLI: Learn how to use it
- Vue.js development tools
- Configure VS code for Vue development
- Create your first application with Vue.js
- Vue.js single file component
- Vue.js templates and interpolation
- Vue.js instructions
- Vue.js method
- Vue.js calculated attributes
- Use CSS to style Vue.js components
- Vue.js observer
- Vue method vs observer vs calculated property
- Vue.js filter
- Vue.js components
- Vue.js slot
- Vue.js component props
- Vue.js activities
- Vue.js component communication
- Vuex, Vue.js state manager
- Vue, use a component inside another component
- Vue, how to use prop as a class name
- How to use SCSS with Vue.js single file component
- Use Tailwind in Vue.js
- Vue router
- Dynamically display Vue components
- Vue.js cheat sheet
- Use Vuex to store Vue data to localStorage
- How to use Vue dynamic application class
- Vue, how to use the v model
- Vue, why data must be functions
- Roadmap to become a Vue.js developer in 2020