Фильтры и их использование

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

Определение фильтров

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

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

Vue.filter('uppercase', function(value) {
  if (!value) return '';
  return value.toString().toUpperCase();
});

Локальный фильтр в компоненте:

export default {
  data() {
    return {
      message: 'hello world'
    };
  },
  filters: {
    lowercase(value) {
      if (!value) return '';
      return value.toString().toLowerCase();
    }
  }
};

Применение фильтров в шаблоне

Фильтры используются в шаблоне через оператор |:

<p>{{ message | uppercase }}</p>

Если message равно 'hello world', результат отображения будет 'HELLO WORLD'.

Фильтры можно цепочкой комбинировать:

<p>{{ message | uppercase | slice(0, 5) }}</p>

Каждый фильтр получает на вход результат предыдущего.

Передача аргументов в фильтры

Фильтры могут принимать дополнительные аргументы, которые указываются после двоеточия:

Vue.filter('truncate', function(value, length) {
  if (!value) return '';
  return value.length > length ? value.substring(0, length) + '...' : value;
});

Использование в шаблоне:

<p>{{ message | truncate(10) }}</p>

Ограничения фильтров в Vue 3

Во Vue 3 фильтры больше не поддерживаются в шаблоне. Их заменяет использование методов компонентов, вычисляемых свойств (computed) или отдельной функции форматирования.

Пример замены фильтра методом:

export default {
  data() {
    return {
      message: 'hello world'
    };
  },
  methods: {
    uppercase(value) {
      if (!value) return '';
      return value.toUpperCase();
    }
  }
};

В шаблоне:

<p>{{ uppercase(message) }}</p>

Такой подход сохраняет функциональность фильтров, но полностью совместим с Vue 3.

Практические примеры использования

Форматирование даты:

Vue.filter('formatDate', function(value) {
  if (!value) return '';
  const date = new Date(value);
  return date.toLocaleDateString();
});

<p>{{ post.createdAt | formatDate }}</p>

Форматирование чисел с разделителями:

Vue.filter('numberWithCommas', function(value) {
  if (!value) return '0';
  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
});

<p>{{ 1234567 | numberWithCommas }}</p>

Краткий текст (обрезка):

Vue.filter('shortText', function(value, length = 50) {
  if (!value) return '';
  return value.length > length ? value.substring(0, length) + '...' : value;
});

<p>{{ article.text | shortText(100) }}</p>