Фильтры

Для распространённых задач форматирования текста во Vue используются фильтры. Они находят своё применение в двух местах: в mustache-интерполяциях и в выражениях v-bind (последнее поддерживается в 2.1.0+). Фильтры добавляются в конце выражения JavaScript и отделяются вертикальной чертой:

<!-- mustache -->
{{ message | capitalize }}

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

Вы можете определить локальные фильтры в опциях компонента:

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({
  // ...
})

Когда у глобального фильтра такое же имя как и у локального, то локальный фильтр будет приоритетнее.

Ниже приведён пример использования нашего фильтра capitalize:

Функция фильтра всегда принимает значение выражения (результат предыдущей цепочки) в качестве первого аргумента. В этом примере функция фильтра capitalize получит значение message в качестве аргумента.

Фильтры можно объединять в цепочки:

{{ message | filterA | filterB }}

В этом случае filterA, определённый с одним аргументом, получит значение message, а затем функция filterB будет вызвана с результатом filterA, переданным единственным аргументом в filterB.

Фильтры являются JavaScript-функциями, и потому могут принимать параметры:

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

В данном случае filterA определяется как функция с тремя аргументами. Значение message будет передано первым аргументом. Простая строка 'arg1' будет передана в filterA вторым аргументом, а значение выражения arg2 — третьим.