Vue.js -- Résumé de l'utilisation des filtres

Un filtre est une fonction simple qui traite les données d'entrée en temps réel et retourne un résultat de données. Vue dispose de nombreux filtres pratiques, les filtres utilisent généralement le symbole管道 “ | ”, par exemple :

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

Filtre uppercase : Filtre qui convertit la chaîne d'entrée en majuscules.

VueJs vous permet d'appeler en chaîne les filtres, pour faire simple, c'est-à-dire que la sortie d'un filtre devient l'entrée du filtre suivant, puis il est filtré à nouveau. Ensuite, nous pouvons imaginer un exemple plus simple, utilisant Vue filterBy + OrderBy Filtre pour filtrer tous les produits products. Les produits filtrés appartiennent à la catégorie de produits fruitiers.

FiltreBy : La valeur du filtre doit être un tableau, filterBy + Critère de filtrage. Le critère de filtrage est : 'string || function'+ dans 'optionKeyName'

OrderBy Filtre : La valeur du filtre doit être un tableau, orderBy + Critère de filtrage. Le critère de filtrage est : 'string || array ||function' + 'order ≥ 0 pour l'ordre croissant || order < 0 pour l'ordre décroissant'

Ensuite, nous pouvons voir l'exemple suivant : nous avons un tableau de produits products, nous souhaitons itérer sur ce tableau et les afficher sous forme de liste, c'est-à-dire avec v-for est facile à réaliser.

<ul class="product">
  <li v-for="product in products|filterBy 'fruit' in 'category' |orderBy 'price' 1">}}
    {{product.name}}-{{product.price | currency}}
  </li>
</ul> 

Dans cet exemple, l'utilisation de filterBy filtre la liste contenant le mot-clé 'fruit' dans 'category', et la liste retournée contient uniquement des mots-clés 'fruit'. Le filtre orderBy effectue un tri ascendant sur le prix, si vous souhaitez un tri descendant, il suffit d'ajouter un paramètre inférieur à 0 ;

Filtre personnalisé

Bien que Vue.js nous fournisse de nombreux filtres puissants, parfois ce n'est pas suffisant. Heureusement, Vue nous fournit un moyen propre et simple de définir nos propres filtres, après quoi nous pouvons utiliser le tuyau "|" pour terminer le filtrage.

Pour définir un filtre personnalisé global, il faut utiliser le constructeur Vue.filter(). Ce constructeur nécessite deux paramètres.

Paramètres du constructeur Vue.filter() :

1.filterId: Identifiant de filtre, utilisé comme identifiant unique de votre filtre ;

2.filter function: Fonction de filtre, utilise une fonction pour recevoir un paramètre, puis formatte le paramètre reçu pour obtenir les résultats de données souhaités.

Dans l'exemple suivant, nous devons réaliser le rabais du prix du produit5de réduction, il s'agit en réalité de la mise en œuvre d'un filtre personnalisé, qui représente le prix du produit après réduction5de réduction ; pour le réaliser, il faut accomplir :

a、Utiliser le constructeur Vue.filter() pour créer un filtre appelé discount

b、Entrer le prix d'origine du produit, il peut retourner le prix de réduction après un rabais de 50 %

Voir le code ci-dessous :

Vue.filter('discount', function(value) {
  return value * .5;
});
var product = new Vue({
  el: '.product',
  data: {
    products: [
      {name: ' Pomme',price: 25,category: "Fruit"}, 
      {name: 'Banane',price: 15,category: "Fruit"}, 
      {name: 'Pomme',price: 65,category: "Fruit"}, 
      {name: 'BMW',price: 2500,category: "Voiture"},
      {name: 'Benz',price: 10025,category: "Voiture"}, 
      {name: 'Orange',price: 15,category: "Fruit"}, 
      {name: 'Audi',price: 25,category: "Voiture"}
    ]
  },
) 

Maintenant, vous pouvez utiliser le filtre personnalisé de la même manière que les filtres intégrés de Vue.

<ul class="product">
  <li v-for="product in products|filterBy 'fruit' in 'category' |orderBy 'price' 0">
    {{product.name}}-{{product.price|discount | currency}}
  </li>
</ul> 

Le code ci-dessus met en œuvre le rabais sur le produit5de réduction, mais si vous souhaitez appliquer un rabais de prix quelconque, vous devez ajouter un paramètre de valeur de rabais dans le filtre discount et modifier notre filtre.

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

Puis appeler à nouveau notre filtre

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

Nous pouvons également construire nos propres filtres dans notre instance Vue, ce qui a l'avantage de ne pas affecter d'autres instances Vue qui n'ont pas besoin de ce filtre.

/*Défini globalement 
Vue.filter('discount', function(value,discount) {
  return value * ( discount / 100 ) ;
});
*/
var product = new Vue({
  el: '.product',
  data: {
    products: [
      {name: ' Pomme',price: 25,category: "Fruit"}, 
      {name: 'Banane',price: 15,category: "Fruit"}, 
      {name: 'Pomme',price: 65,category: "Fruit"}, 
      {name: 'BMW',price: 2500,category: "Voiture"},
      {name: 'Benz',price: 10025,category: "Voiture"}, 
      {name: 'Orange',price: 15,category: "Fruit"}, 
      {name: 'Audi',price: 25,category: "Voiture"}
    ]
  },
  //Personnalisation dans l'instance
  filters: {
    discount: function(value, discount) {
      return value * (discount / 100);
    }
  }
) 

Les filtres définis globalement peuvent être appelés dans tous les instances, et les filtres définis dans l'instance peuvent être appelés dans l'instance.　

C'est tout pour cet article, j'espère que cela pourra aider à votre apprentissage, et j'espère que vous continuerez à soutenir le tutoriel à crier.

Déclaration : le contenu de cet article est issu du réseau, propriété des auteurs respectifs, contribué et téléversé par les utilisateurs d'Internet de manière volontaire. Le site Web ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, vous êtes invité à envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois confirmée, le site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)