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

Пользователь

от terrence , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от keyon.brown , 9 месяцев назад

@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'