In vue. Js can custom filters used in some of the common text formatting, the filter can be used in the beard – bind expression, syntax and v filter is javascript function, the pipe symbol | said

  • Use in template
<! - in a pair of curly braces - > {{message | capitalize}} > message as the first parameter to capitalize filter <! - in - bind ` ` v -- -- > < div v - bind: id = "rawId | formatId" > < / div >Copy the code

Local filters (defined inside the component)

export default { filters:{ capitalize: function (value) { if (! value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }Copy the code

Global filters (defined in main.js)

Vue.filter(' capitalize ', function(val){ if (! value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) new Vue{ ( ... ) }Copy the code

If the global filter has the same name as the local filter, use the local filter only

Filters can also be connected in series:

{{ message | filterA | filterB }}
Copy the code

Message is passed in as the first argument to filterA, and the result is passed in as the first argument to filterB to get the final result

Filters are javascript functions that can accept arguments

{{ message | filterA( 'arg1', 'arg2' ) }}
Copy the code

FilterA accepts three arguments: message,arge1, arge2, and arge2