фильтры

Фильтры - это функциональность, предоставляемая Vue.js, которая позволяет нам определять фильтры, которые можно использовать для применения обычного форматирования текста. Фильтры можно использовать в двух местах: выражения v-bind и интерполяция усов (первое поддерживается в 2.1.0+).

Фильтры не изменяют данные компонента, они только влияют. Мы должны добавить фильтры в конец выражения JavaScript, это обозначается символом «труба»:

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in 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({
  // ...
})

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

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

Мы можем связать фильтры:

{{ message | filterA | filterB }}

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

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

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

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

Расширенные фильтры могут принимать параметры, используя обычный синтаксис параметров функции:

HTML

<template>
  <p>Hi {{ name | prepend('Mr.') }}</p>
</template>

JS

<script>
export default {
  data() {
    return {
      name: 'Room'
    }
  },
  filters: {
    prepend: (name, prefix) => {
      return `${prefix} ${name}`
    }
  }
}
</script>

Примечание: мы должны избегать использования функции стрелки в вычисляемых свойствах и методах вообще, потому что они будут ссылаться на это для доступа к данным компонента, однако в приведенном выше случае фильтр не нуждается в доступе к this, но получает все необходимые данные через параметры следовательно, мы можем безопасно использовать более простой синтаксис функции стрелки.