Vue.js фильтры: простое руководство для новичков

Что такое фильтры?

Фильтры — механизм обработки данных перед их выводом. Они позволяют, например, выводить текст в верхнем или нижнем регистре, искать определённые элементы и выполнять другие преобразования.

Пример: Вывод текста в верхнем регистре

Сначала рассмотрим вывод текста в верхнем регистре без фильтров, чтобы понять их необходимость. Создадим переменную message со значением «Hello» и вычисляемое свойство showM, использующее метод toUpperCase() JavaScript:

data() {
  return {
    message: 'Hello'
  }
},
computed: {
  showM() {
    return this.message.toUpperCase();
  }
}

Результат: HELLO. Этот подход неэффективен при большом количестве переменных, требующих преобразования. Фильтры решают эту проблему.

Создание фильтров

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

Локальные фильтры

Создадим локальный фильтр lowercase, преобразующий текст в нижний регистр:

filters: {
  lowercase(value) {
    return value.toLowerCase();
  }
}

Применение к переменной message:

{{ message | lowercase }}

Результат: hello.

Глобальные фильтры

Глобальные фильтры создаются с помощью Vue.filter(). Например, фильтр capitalize, преобразующий первый символ в верхний регистр:

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

Этот фильтр доступен во всех компонентах.

Пример использования нескольких фильтров:

{{ message | lowercase | capitalize }}

Результат: Hello. (Сначала применяется lowercase, затем capitalize).

В Vue.js нет встроенных фильтров.

Глобальные vs локальные фильтры

Локальный фильтр работает только внутри компонента, где он определён. Глобальный — доступен во всех компонентах приложения.

Фильтры — мощный инструмент для обработки данных в Vue.js. Простота использования и возможность создания собственных фильтров упрощают работу с данными. Выбор между глобальными и локальными фильтрами зависит от области применения.

Что будем искать? Например,программа