Vue позволяет использовать фильтры (filters), которые влияют на отображение, при этом не изменяя сами данные. Фильтры могут использоваться в двух местах:

1. строковые интерполяции {{ }};
2. выражения v-bind.

<!-- in mustaches -->
{{ message | capitalize }}

<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

Фильтр является функцией и получает значение, находящееся перед символом пайпа (|), как аргумент value.

Фильтры можно комбинировать (соединять в цепочки один за другим).

Определение фильтров: глобальное и локальное:

================================

Локальное:

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

Глобальное (до создание корневого экземпляра Vue):

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

new Vue({
// ...
})

Использование дополнительных аргументов в фильтрах:

=====================================

{{ message | filterA('arg1', arg2) }}

В данном примере переменная message будет передана в фильтр первым аргументом, а строки 'arg1' и 'arg2' как второй и третий аргумент соответственно.