Обзор использования фильтров в Vue.js

Фильтр - это простая функция, которая обрабатывает вводные данные и возвращает результат обработки данных в виде данных. Vue предоставляет множество удобных фильтров, которые обычно используются с помощью знака管道 «|», например:

{{ msg | capitalize }}
// 'abc' => 'ABC' 

Фильтр uppercase: фильтр, который преобразует входную строку в заглавные буквы.

VueJs позволяет вам использовать фильтры по цепочке, что означает, что выход одного фильтра становится входом для следующего фильтра, который снова фильтрует. Далее, давайте рассмотрим более простой пример, который использует фильтры filterBy + orderBy Vue для фильтрации всех товаров products. Отфильтрованные продукты都属于 категории фруктов.

Фильтр filterBy: значение фильтра должно быть массивом, filterBy + условие фильтрации. Условие фильтрации: 'string || function'+ in 'optionKeyName'

Фильтр orderBy: значение фильтра должно быть массивом, orderBy + условие фильтрации. Условие фильтрации: 'string || array ||function' + 'order ≥ 0 для возрастания || order < 0 для убывания'

Далее, давайте рассмотрим следующий пример: у нас есть массив товаров products, и мы хотим пройтись по этому массиву и напечатать их в виде списка. Это можно легко реализовать с помощью v-for.

<ul class="product">
  <li v-for="product in products|filterBy 'фрукты' in 'category' |orderBy 'price' 1">
    {{product.name}}-{{product.price | currency}}
  </li>
</ul> 

В приведенном выше примере используется фильтр filterBy для фильтрации списка, содержащего ключевое слово 'фрукты' в 'category', возвращаемый список содержит только список с ключевым словом 'фрукты', а фильтр orderBy выполняет сортировку по цене в порядке возрастания. Если вам нужно сортировка по убыванию, просто добавьте параметр меньше 0;

Собственные фильтры

Хотя VueJs предоставляет нам множество мощных фильтров, иногда этого недостаточно. К счастью, Vue предоставляет нам чистый и лаконичный способ определить свои собственные фильтры, после чего мы можем использовать管道 «|» для выполнения фильтрации.

Для определения глобального пользовательского фильтра необходимо использовать конструктор Vue.filter(). Этот конструктор требует двух параметров.

Parameters of Vue.filter() Constructor:

1.filterId: Идентификатор фильтра, который используется в качестве уникального идентификатора вашего фильтра;

2.filter function: Функция фильтра, которая принимает один параметр и преобразует его в желаемый формат данных.

В примере, приведенном выше, как можно реализовать скидку 50% на цену товара? Это просто реализация пользовательского фильтра, который означает, что цена товара была снижена на 50%; чтобы реализовать его, нужно выполнить следующее:

a、Использовать конструктор Vue.filter() для создания фильтра с именем discount

b、Ввести первоначальную цену товара и получить цену со скидкой 50%

Код см. ниже:

Vue.filter('discount', function(value) {
  return value * .5;
});
var product = new Vue({
  el: '.product',
  data: {
    products: [
      {name: '苹果',price: 25,category: "水果"}, 
      {name: '香蕉',price: 15,category: "水果"}, 
      {name: '雪梨',price: 65,category: "水果"}, 
      {name: '宝马',price: 2500,category: "汽车"},
      {name: '奔驰',price: 10025,category: "汽车"}, 
      {name: '柑橘',price: 15,category: "水果"}, 
      {name: '奥迪',price: 25,category: "汽车"}
    ]
  },
) 

Теперь можно использовать пользовательский фильтр так же, как и встроенные фильтры Vue.

<ul class="product">
  <li v-for="product in products|filterBy 'фрукты' in 'category' |orderBy 'price' 0">
    {{product.name}}-{{product.price|discount | currency}}
  </li>
</ul> 

Верхний код реализует скидку 50% на товар, а если нужно реализовать любую скидку, то нужно добавить параметр значения скидки в фильтр discount и изменить наш фильтр.

 Vue.filter('discount', function(value, discount) {
  return value * (discount / 100);
}); 

Затем повторно вызываем наш фильтр

 <ul class="product">
  <li v-for="product in products|filterBy 'фрукты' in 'category' |orderBy 'price' 0">
    {{product.name}}-{{product.price|discount 25 | currency}}
  </li>
</ul> 

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

/* Определено в глобальном масштабе 
Vue.filter('discount', function(value, discount) {
  return value * ( discount / 100 ) ;
});
*/
var product = new Vue({
  el: '.product',
  data: {
    products: [
      {name: '苹果',price: 25,category: "水果"}, 
      {name: '香蕉',price: 15,category: "水果"}, 
      {name: '雪梨',price: 65,category: "水果"}, 
      {name: '宝马',price: 2500,category: "汽车"},
      {name: '奔驰',price: 10025,category: "汽车"}, 
      {name: '柑橘',price: 15,category: "水果"}, 
      {name: '奥迪',price: 25,category: "汽车"}
    ]
  },
  //自定义在实例
  filters: {
    discount: function(value, discount) {
      return value * (discount / 100);
    }
  }
) 

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

Вот весь контент статьи, надеюсь, он поможет вам в изучении, также希望大家多多支持呐喊教程。

Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат их законным владельцам, содержимое предоставлено пользователями Интернета в добровольном порядке, этот сайт не имеет права собственности, не производилось редактирование, не нести ответственности за соответствующие юридические вопросы. Если вы обнаружите подозрительное нарушение авторских прав, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для подачи жалобы и предоставления соответствующих доказательств. При подтверждении факта нарушения авторских прав сайт немедленно удалят подозрительное нарушение авторских прав.