Filters — Vue.js | vue slice
Vue.jsallowsyoutodefinefiltersthatcanbeusedtoapplycommontextformatting.Filtersareusableintwoplaces:mustacheinterpolationsandv-bindexpressions(thelattersupportedin2.1.0+).FiltersshouldbeappendedtotheendoftheJavaScriptexpression,denotedbythe“pipe”symbol:{{message|capitalize}}
Vue.js allows you to define filters that can be used to apply common text formatting. Filters are usable in two places: mustache interpolations and v-bind expressions (the latter supported in 2.1.0+). Filters should be appended to the end of the JavaScript expression, denoted by the “pipe” symbol:
<!-- in mustaches -->{{ message | capitalize }}<!-- in v-bind --><div v-bind:id="rawId | formatId"></div>
You can define local filters in a component’s options:
filters: {capitalize: function (value) {if (!value) return value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)}}or define a filter globally before creating the Vue instance:
Vue.filter(capitalize, function (value) {if (!value) return value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)})new Vue({// ...})
When the global filter has the same name as the local filter, the local filter will be preferred.