How to use vue filter

Overview

Before vue2.0, there were built-in filters. In 2.0, there are no built-in filters, but we can customize filters.

Regarding Vue filters, the official documentation states:

Vue.js allows you to define your own filters, which can be used for some common text formatting. Filters can be used in two places: double curly brace interpolation and v-bind expressions (the latter is supported since 2.1.0+). Filters should be added at the end of a JavaScript expression, indicated by the "pipe" symbol.

That is, a filter is a function used to format data. The filter will not modify the original data. Its function is to filter the data, that is, to process the data and return the processed data, such as making some changes to the data format, state conversion, etc.

There are two types of filters

• Filters within components (valid within components)
• Global filters (shared by all components)

Defining filters

The first parameter is the name of the filter.

The second parameter is the function of the filter (if vue is not defined, you don’t know what this string is and what it does).

Filter Functions

• Declaration function (data, argv1, argv2...) {}
• The first parameter is the data to be filtered, that is, the content to the left of the pipe character when calling.
• The second parameter onwards are the parameters passed in when calling the filter.

Use of filters

Register first, use later

In the component, filters:{ filter name: fn } returns the final data through return in fn

Global Vue.filter('filter name',fn) returns the final data through return in fn

Use {{ data | filter name }}

// When using filters, you need to add a pipe symbol ( | ) as a separator. The filter name is on the right side of the pipe symbol |, which is the function of the text.
<!-- in double curly braces -->
{{ message | filter name}}
​
<!-- In `v-bind` -->
<div v-bind:id="id | filter name"></div>

Custom global filters

Vue.filter('filter name', function(val) { // val represents the data to be processed // filter business logic, must have a return value})
​
<div>{{ msg | filter name}}</div>
<div v-bind="msg | filter name"></div>

Local filter

data () {
    return {
        msg: 'hello world'
    }
},
//Define private local filters. Filters can only be used in the current vue object: {
    dataFormat: (msg, a) => { // msg represents the data to be filtered, a represents the incoming parameter return msg + a;
    }
}
​
<p>{{ msg | dataFormat('!')}}</p> // Result: hello world!

Precautions

1. When registering globally, it is filter without s, while component filters are filters with s. Although there is no error when writing without s, the filter has no effect.

2. When the names of global filters and local filters are repeated, they will be called based on the principle of proximity, that is, the local filter will be called before the global filter

3. An expression can use multiple filters. The execution order is from left to right. The result of the previous filter is used as the processed data of the next filter, so pay attention to the order of use.

Those who are familiar with Vue will know that filters can sometimes achieve the purpose of processing data like methods, computed, and watch, but they cannot replace them because they cannot change the original value. If the internal structure of a filter is particularly complex, you can consider writing it as a calculated property, because the calculated property itself has a cache and is highly reusable, while filters are generally used to perform some simple operations.

In actual development, global filters are more widely used than local filters. To put it bluntly, why do we use filters? In fact, it is the same as using functions. Some methods are encapsulated for use by other components, which makes it more convenient and faster to call.

As we all know, global filters are defined in main.js. However, if the project is too large and there are multiple filters, main.js will be a bunch of code. For the modularization of the project, it is best to have a special directory to store these filters uniformly, and then extract the processing functions and put them in a .js file. The example code is shown below.

Example 1 (local filter)

Format the time or date, fill in the specified number of digits, and fill in 0 if the number is less than one digit

// filter/index.js file export default {
    dateFormat: value => {
        const dt = new Date(value * 1000)
    
        const y = dt.getFullYear()
        const m = (dt.getMonth() + 1 + '').padStart(2, '0') // .padStart(specified number of digits, "sign or value to be filled")
        const d = (dt.getDay() + '').padStart(2, '0')
        
        const hh = (dt.getHours() + '').padStart(2, '0')
        const mm = (dt.getMinutes() + '').padStart(2, '0')
        const ss = (dt.getSeconds() + '').padStart(2, '0')
        
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    }
}
​
// Use local filters in .vue files <script>
    import filters from '../filter'
​
    export default {
        ... ... 
        filters: { ...filters },
        data() {
            return {}
        }
    }
</script>
​
<div> Date: {{ date | dateFormat }} </div>

Example 2 (global filter)

Echo of common dictionary items: For example, gender, male or female, or general selection, the data sent to us by the backend is 0 or 1, and we need to display male or female or yes or no on the page

// constants/dictionary.js file​
export const GENDER_MENU = [
    { code: 0, label: 'Male'},
    { code: 1, label: 'Female'}
];
​
export const COMMON_MENU = [
    { code: 0, label: 'No'},
    { code: 1, label: 'Yes'}
];
​
export default {
    GENDER_MENU, COMMON_MENU
}

filter/dict.js file

// filter/dict.js file​
import Dict from '../constants/dictionary'
​
export const genderMenu = {
    func: value => {
        const target = Dict.GENDER_MENU.filter(item => {
            return item.code = value;
        })
        return target.length ? target[0].label : value;
    }
}
​
export const commonMenu = {
    func: value => {
        const target = Dict.COMMON_MENU.filter(item => {
            return item.code = value;
        })
        return target.length ? target[0].label : value;
    }
}

filter/index.js file

// filter/index.js file​
import * as filters from './dict' // Import filter function​
const Install = Vue => {
    // The imported filters is an object. Use the Object.keys() method to get an array of keys. Iterate over the data and use the key as the name of the global filter. The key is followed by the corresponding processing function. This way, the global filter can be used in any component. Object.keys(filters).forEach(key => {
        Vue.filter(key, filters[key].func)
    })
    /*
    for(const _filter in filters) {
        Vue.filter(`${_filter}`, filters[_filter].func)
    } */
}
​
export default Install

main.js file

// main.js file​
... ...
import filters from './../filter/index'
Vue.use(filters)
... ...

Using global filters in .vue files

// Use global filters in .vue files​
<p>Gender: {{ gender | genderMenu }}</p>

The above is the details of how to use the vue filter. For more information about the vue filter, please pay attention to other related articles on 123WORDPRESS.COM!