Explication détaillée des filtres pour l'apprentissage de Vue.js

Préface

Dans ce tutoriel, nous comprendrons et apprendrons les filtres VueJs à travers plusieurs exemples. La condition préalable à la lecture de cet article est que vous ayez déjà une base de syntaxe de base pour Vue.

Bases des filtres dans Vue.Js

Un filtre est une fonction simple qui peut traiter les données dans le temps et renvoyer un résultat de données en saisissant des données. Vue dispose de nombreux filtres pratiques. Vous pouvez vous référer à la documentation officielle, http://cn.vuejs.org/api/#Filter Les filtres utilisent généralement la marque verticale "|", telle que :

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

< 🎜. >

filtre majuscule : un filtre qui convertit la chaîne d'entrée en lettres majuscules.

VueJs vous permet d'enchaîner des filtres d'appel. En termes simples, la sortie d'un filtre devient l'entrée du filtre suivant, puis filtrée à nouveau. Ensuite, nous pouvons imaginer un exemple relativement simple utilisant le filtre filterBy orderBy de Vue pour filtrer tous les produits. Les produits filtrés sont des produits fruitiers.

filterBy filter : La valeur du filtre doit être un tableau, condition de filtre filterBy. La condition de filtre est : 'string || function' dans 'optionKeyName'

orderBy filter : La valeur du filtre doit être un tableau, condition de filtre orderBy. La condition de filtre est : 'string || array ||function' 'order ≥ 0 est un ordre croissant || order < 0 est un ordre décroissant'

Ensuite, nous pouvons regarder l'exemple suivant : Nous avons un gamme de produits, nous voulons parcourir ce tableau et les imprimer dans une liste. C'est facile à réaliser avec v-for.

<ul class="product">
 <li v-for="product in products|filterBy &#39;水果&#39; in &#39;category&#39; |orderBy &#39;price&#39; 1">
 {{product.name}}-{{product.price | currency}}
 </li>
</ul>

L'exemple ci-dessus consiste à utiliser filterBy pour filtrer la liste contenant le mot-clé 'fruit' dans 'category', et la liste renvoyée est une liste contenant uniquement le 'fruit' mot-clé , et le filtre orderBy effectue un ordre croissant en fonction du prix. Si vous souhaitez commander par ordre décroissant, il vous suffit d'ajouter un paramètre inférieur à 0

Filtre personnalisé

Bien que VueJs nous le fournisse. avec beaucoup Un filtre puissant, mais parfois ce n'est pas suffisant. Heureusement, Vue nous fournit un moyen propre et concis de définir nos propres filtres, et nous pouvons ensuite utiliser le canal "|" pour terminer le filtrage.

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

Vue.filter() Constructor Parameters:

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

2.filter function : fonction de filtre ; , utilise une fonction pour recevoir un paramètre, puis formate le paramètre reçu dans le résultat de données souhaité.

Dans l'exemple ci-dessus, que devons-nous faire pour obtenir une remise de 50 % sur le prix du produit ? En fait, il s'agit d'un filtre personnalisé implémenté, ce qui signifie que le prix du produit est réduit de 50 % ; pour l'implémenter, il faut compléter :

a. constructeur pour créer un filtre L'outil s'appelle remise

b. Entrez le prix original du produit pour renvoyer le prix réduit après 50% de remise

Le code est le suivant :

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: "汽车"}
 ]
 },
})

Vous pouvez désormais utiliser des filtres personnalisés, tout comme les propres filtres de Vue

<ul class="product">
 <li v-for="product in products|filterBy &#39;水果&#39; in &#39;category&#39; |orderBy &#39;price&#39; 0">
 {{product.name}}-{{product.price|discount | currency}}
 </li>
</ul>

Les produits implémentés par le code ci-dessus bénéficieront d'une réduction de 50 % , et si vous souhaitez le mettre en œuvre, le prix sera réduit. Qu'en est-il des réductions ? Nous devons ajouter un paramètre de valeur de remise au filtre de remise et modifier notre filtre.

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

Puis rappelons notre filtre

<ul class="product">
 <li v-for="product in products|filterBy &#39;水果&#39; in &#39;category&#39; |orderBy &#39;price&#39; 0">
 {{product.name}}-{{product.price|discount 25 | currency}}
 </li>
</ul>

On peut aussi construire notre filtre dans notre instance Vue, l'avantage de cette structure est qu'elle n'affectera pas les autres instances de Vue qui n'ont pas besoin d'utiliser ce filtre.

/*定义在全局
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);
 }
 }
})

S'il est défini globalement, le filtre peut être appelé dans toutes les instances. S'il est défini dans une instance, le filtre sera appelé dans l'instance.

Résumé

Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra être utile à tout le monde dans l'apprentissage ou l'utilisation de vue. Si vous avez des questions, vous pouvez partir. un message à communiquer.

Pour des explications plus détaillées sur les filtres Vue.js, veuillez faire attention au site Web PHP chinois !