> For the complete documentation index, see [llms.txt](https://d-ukolov.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://d-ukolov.gitbook.io/vue/direktivy/filtry.md).

# Фильтры

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

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

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

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

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

или определить фильтр глобально перед созданием экземпляра Vue:

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

new Vue({
  // ...
})
```

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

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

<div align="left"><img src="https://955258160-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LuIgnBBZPLjlzke50z9%2F-LxzWmOCKsR0ZN4I1-p9%2F-Lxziq4FOgjmf915u4vt%2Fimage.png?alt=media&amp;token=0612ceb7-6ab4-4472-b52e-5fdd9a4f12a4" alt=""></div>

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

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

```markup
{{ message | filterA | filterB }}
```

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

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

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

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