A Vue filter classification

Filters are divided into two types, one is a local filter, one is a global filter. All filters are functions and take the data to be filtered.

Local filters: Global filters are only allowed in the current component: they are available to all components

Two. Local filter

2.1 Local filter with no parameter transmission

ViewModel var vm = new Vue({el: '#app', data: {MSG: 'filter'}, methods: {}, // define a private local filter. Filters can only be used in the current vue object: {dataFormat(MSG) {return MSG +' XXXXX '; }}});Copy the code

This object defines local filters. The following code shows how to use filters in a build:

< div id = "app" > < p > {{MSG | dataFormat}} < / p > / / results filterxxxxx < / div >Copy the code

2.2 Pass local filters

Of course, you should also be thinking that such a filter may be cumbersome and not flexible enough to use. Since the filter is a function, can it pass parameters? Next we make the use of filters more flexible with parameters.

ViewModel var vm = new Vue({el: '#app', data: {MSG: 'filter'}, methods: {}, // define a private local filter. Filters can only be used in the current vue object: {// MSG denotes the data to be filtered // a denotes the argument passed in dataFormat(MSG,a) {return MSG +a; }}}); <! - HTML part -- -- > < div id = "app" > < p > {{MSG | dataFormat (" hello ")}} < / p > <! <p>filter hello </p>-->Copy the code

Global filters

3.1 Defining a global filter without parameters

Vue. Filter ('msgFormat', function(MSG) {return MSG. Replace (/ simple /g, 'XXX ')})Copy the code

Complete sample

\ \ < div id = "app" > < p / > {{MSG | msgFormat}} < / p / > < / div \ > < script \ > / / define a Vue global filters, MsgFormat vue. filter('msgFormat', function(MSG) {// string replace method, first argument, in addition to writing a string, You can also define a regular return msg.replace(/ pure /g, 'xx')}) </script>Copy the code

3.2 Defining a global filter with parameters

\ \ < div id = "app" > < p / > {{MSG | msgFormat (' crazy ', '-')}} < / p / > < / div \ > < script \ > / / define a Vue global filters, Filter ('msgFormat', function(MSG, arg, arg2) {// String replace method, the first argument, in addition to writing a string, You can also define a regular return msg.replace(/ pure /g, arg+arg2)}) </script>Copy the code

Four. The position of the filter

4.1.Interpolate in double curly braces

{{ 'ok' | globalFilter }}
Copy the code

4.2 Used in v-bind expressions

<div v-bind:data="'ok' | globalFilter" ></div>
Copy the code

In live.

  • Global filters are more widely used than local filters. To put it simply, we want to use filters, just like using functions. We want to encapsulate some methods for other components to use, which is easier to call and faster to develop.
  • Not only one filter can be used, but multiple filters can be used for the same data, executed from left to right. Note that the next filter receives the processing results of the previous filter, so pay attention to the order in which the data is used
{{ message | filterA | filterB }}
Copy the code

In this code, message is passed as an argument to the filterA function, and the return value of the filterA function is passed as an argument to the filterB function, and the final result is returned by filterB.

  • When there are two filters with the same name, local and global filters will be called on the nearest principle, that is: local filters will be called before global filters!
  • An expression can use more than one filter. The need for pipe between filter operator “|”. They are executed from left to right
/* global filter all components can use 2. Local filters Local filters with and without parameters are defined and used in the same way as global filters. The only difference is that local filters are defined in vUE instances. The area it works on is also the area controlled by vue instance #app */ //1. Filter ('dateFormat', (time) => {return moment(). Format ("YYYY-MM-DD,HH: MM :ss")}) new Vue({el: "#app", data: { time: Date.now(), money: 10000 }, filters: { //2. TimeFormat (time) {return moment(). Format('YYYY-MM-DD, HH: MM :ss a'); }, money format (money) {return "$" + money +" $"}}})Copy the code