[Vue]: Filters

filter

The concept: Vue.js allows you to customize filters, can be used as a common text formatting . Filters can be used in two places: Mustache interpolation and v-bind expression . The filter should be added at the end of the JavaScript expression, a "pipe" which is indicated;

Private Filters

Private filtersdefined Example: Time Format

filters: {
    dateFormat(dateStr) {
        var dt = new Date(dateStr)
        var y = dt.getFullYear()
        var m = (dt.getMonth() + 1).toString().padStart(2, '0')
        var d = dt.getDate().toString().padStart(2, '0')
        var hh = dt.getHours().toString().padStart(2, '0')
        var mm = dt.getMinutes().toString().padStart(2, '0')
        var ss = dt.getSeconds().toString().padStart(2, '0')
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    }
}

${y}-${m}-${d} ${hh}:${mm}:${ss}Using a template character string

Using the new method of String.prototype.padStart string ES6 (maxLength, fillString = '') or String.prototype.padEnd (maxLength, fillString = '') to fill the string;

Global Filters

The string replacemethod, the first parameter, in addition to write a string, but also may define a regular, if a first string parameter passed only replace the first matching string. Parameters can be passed in the filter.

Vue.filter('msgFormat', function(msg, arg){
    return msg.replace(/字符/g, '数字')
})

Filter through line character call, the filter support continuous call.

{{msg | msgFormat('XXX')}}
{{msg | filter1('XXX') | filter2() }

Note: When there are two local and global same name filter time, will be called to the principle of proximity, namely: local filter precedence over global filter is called!