Vue implements built-in filter instances and vue filter instances

Vue implements built-in filter instances and vue filter instances

Filter Writing Method

{{ message | Filter}}

Two Vue built-in filter: capitalize

Function: uppercase letters

<! DOCTYPE html> 
Above code output: Abc
Third Vue's built-in filter: uppercase
Function: all uppercase
<! DOCTYPE html> 
Above code output: ABC
Four Vue built-in filter: uppercase
Function: All lowercase letters
<! DOCTYPE html> 
Above code output: abc
Vue's built-in filter: currency
Function: outputs money and decimal points
Parameters:
The first parameter {String} [currency symbol]-default value: '$'
The second parameter {Number} [decimal place]-default value: 2
<! DOCTYPE html> 
Six Vue built-in filter: pluralize
Function: if there is only one parameter, simply add "s" at the end of the complex form ". If there are multiple parameters, the parameter is treated as a string array, corresponding to one, two, three... The plural word. If the number of values is greater than the number of parameters, the last parameter is used.
Parameter: {String} single, [double, triple ,...
<! DOCTYPE html> 
7. Vue built-in filter: debounce
(1) Restrictions: must be used in @
(2) parameter: {Number} [wait]-default value: 300
(3) function: Package the processor to delay the execution of x ms, default delay of 300 ms. The encapsulated processor will at least delay x ms after calling, if called again before the delay ends, the delay duration is reset to x ms.
<! DOCTYPE html> 
8. Vue built-in filter: limitBy
(1) restriction: It must be used in v-for (array ).
(2) Two parameters:
First parameter: Number obtained by {Number}
Second parameter: {Number} offset
<! DOCTYPE html> 
9. Vue built-in filter: filterBy
(1) restriction: It must be used in v-for (array ).
(2) three parameters:
First parameter: {String | Function} String to be searched
Second parameter: in (optional, specifying the search location)
Third parameter: {String} (optional, array format)
<! DOCTYPE html> 
10. Vue built-in filter: orderBy
(1) restriction: It must be used in v-for (array ).
(2) three parameters:
First parameter: {String | Array <String> | Function} String to be searched
The second parameter: {String} the optional parameter order determines whether the result is in ascending order (order> = 0) or in descending order (order <0). The default value is in ascending order.
<! DOCTYPE html> 
Source Code address: vue-filter_jb51.rar

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.