The filter of vue is usually at the end of a JavaScript expression and is indicated by the "|" symbol:
Filters can make our code more beautiful, and can generally be used in time formatting, initials, etc.
For example:{{ date | dateFormat }}ThisIt is the way to write a filter;{{ dateFormat(date) }}This is how to write a function call
It can be seen that the filter is written more semantic, allowing people to see its meaning at a glance.
<!-- In double braces -->
{{ message | capitalize }}
<!-- exist `v-bind` middle -->
<div v-bind:></div>
<!-- Multiple filters can also be connected in series -->
{{ message | filterA | filterB }}
// In this example, filterA is defined as a filter function that receives a single parameter, and the value of the expression message will be passed as an argument into the function. Then continue to call filterB, which is also defined as receiving a single parameter, and pass the result of filterA into filterB
<!-- Filter receive parameters -->
{{ message | capitalize('string', obj) }}
// The parameters here will start with the second parameter in the filter function and the first parameter is the value to be filtered message, that is, 'string' is the second parameter and obj is the third parameter.
After receiving the parameters of the filter method, you can perform a series of processing within the method and finally return the processing result.
1. The filter can be inside the component
filters: {
capitalize: function (value) {
if (!value) return ''
value = ()
return (0).toUpperCase() + (1)
}
}
2. The filter can also be mounted in global Vue.
('capitalize', function (value) {
if (!value) return ''
value = ()
return (0).toUpperCase() + (1)
})
Summarize
The above is a detailed explanation of the vue filter filter example introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!