Фильтры Vue.js

Фильтры - это способ, которым Vue.js позволяет нам применять форматирование и преобразования к значению, используемому в интерполяции шаблона.

Фильтры - это функциональные возможности, предоставляемые компонентами Vue, которые позволяют применять форматирование и преобразования к любой части динамических данных вашего шаблона.

Они не изменяют данные компонента или что-то еще, но влияют только на вывод.

Допустим, вы печатаете имя:

<template>
  <p>Hi {{ name }}!</p>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
}
}
</script>

Что, если вы хотите это проверитьnameна самом деле содержит значение, и если не вывести «там», чтобы наш шаблон напечатал «Привет!»?

Введите фильтры:

<template>
  <p>Hi {{ name | fallback }}!</p>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
},
filters: {
fallback: function(name) {
return name ? name : ‘there’
}
}
}
</script>

Обратите внимание на синтаксис для применения фильтра:| filterName. Если вы знакомы с Unix, это оператор конвейера Unix, который используется для передачи вывода операции в качестве ввода следующей.

ВfiltersСвойство компонента является объектом. Одиночный фильтр - это функция, которая принимает значение и возвращает другое значение.

Возвращаемое значение - это то, что фактически напечатано в шаблоне Vue.js.

У фильтра, конечно же, есть доступ к данным и методам компонентов.

Как лучше всего использовать фильтры?

преобразование строки, например, использование заглавных или строчных букв
форматирование цены

Выше вы видели простой пример фильтра:{{ name | fallback }}.

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

{{ name | fallback | capitalize }}

Сначала применяетсяfallbackфильтр, затемcapitalizeфильтр (который мы не определяли, но попробуйте его создать!).

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

<template>
  <p>Hello {{ name | prepend('Dr.') }}</p>
</template>
<script>
export default {
data() {
return {
name: ‘House’
}
},
filters: {
prepend: (name, prefix) => {
return </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">prefix</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
}
}
}
</script>

Если вы передаете параметры в фильтр, первым переданным в функцию фильтра всегда будет элемент в интерполяции шаблона (nameв данном случае), за которым следуют переданные вами явные параметры.

Вы можете использовать несколько параметров, разделяя их запятыми.

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

Этот пакетесть много готовых фильтров, которые вы можете использовать непосредственно в шаблонах, в том числеcapitalize,uppercase,lowercase,placeholder,truncate,currency,pluralizeи больше.

Скачать мою бесплатнуюСправочник по Vue

Фильтры Vue.js

Фильтры - это способ, которым Vue.js позволяет нам применять форматирование и преобразования к значению, используемому в интерполяции шаблона.

Больше руководств по vue: