Как использовать фильтры в Vue.js?

@terrence 

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

Чтобы использовать фильтры в Vue.js, следуйте этим шагам:

1. Определите фильтр: В определении компонента Vue.js вы можете добавить блок filters, где определяются ваши фильтры. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

Vue.component('my-component', {
  // ...
  filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  },
  // ...
})

1. Используйте фильтр в шаблоне: В шаблоне компонента можно использовать фильтр с помощью символа | (вертикальная черта). Например:

1
2
3
4
5

<template>
  <div>
    <p>{{ message | capitalize }}</p>
  </div>
</template>

В этом примере фильтр capitalize будет применяться к значению message, преобразуя первую букву в верхний регистр.

1. Передача параметров в фильтр (опционально): Если вашему фильтру требуются дополнительные параметры, вы можете передавать их через символ |. Например:

1
2
3
4
5

<template>
  <div>
    <p>{{ fullName | truncate(20) }}</p>
  </div>
</template>

В этом примере фильтр truncate применяется к значению fullName с параметром 20, что означает, что значение будет обрезано до 20 символов.

1. Глобальные фильтры (опционально): Кроме определения фильтров внутри компонента, вы также можете определить их глобально для использования в любом месте вашего приложения. Для этого вы можете использовать метод Vue.filter(). Например:

1
2
3
4
5

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

После этого фильтр capitalize будет доступен в любом компоненте вашего приложения.

Вот простой пример, который демонстрирует использование фильтров в Vue.js. Вы можете адаптировать его под свои потребности:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<template>
  <div>
    <p>{{ message | capitalize }}</p>
    <p>{{ fullName | truncate(20) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello world',
      fullName: 'John Doe'