Vue.js -- Zusammenfassung der Verwendung von Filtern

Filter sind einfache Funktionen, die Daten verarbeiten und ein Datenergebnis in Echtzeit zurückgeben können. Vue bietet viele bequeme Filter, die normalerweise mit dem Pipemarker " | " verwendet werden, z.B.:

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

uppercase Filter: Ein Filter, der die Eingabezeichenfolge in Großbuchstaben umwandelt.

VueJs ermöglicht die Kettung von Filtern, vereinfacht gesagt, ist das Ausgabe des einen Filters der Eingabe des nächsten Filters und dann erneut filtern. Nun können wir uns einen einfachen Beispiel vorstellen, der Vue filterBy + orderBy Filter, um alle Produkte products zu filtern. Die gefilterten Produkte gehören zur Obstklasse.

filterBy Filter: Der Wert des Filters muss ein Array sein, filterBy + Filterkriterien. Die Filterkriterien sind: 'string || function'+ in 'optionKeyName'

orderBy Filter: Der Wert des Filters muss ein Array sein, orderBy + Filterkriterien. Die Filterkriterien sind: 'string || array ||function' + 'order ≥ 0 für aufsteigende Ordnung || order < 0 für absteigende Ordnung'

Nun können wir den folgenden Beispiel betrachten: Wir haben ein Warenkorb-Array products, und wir möchten dieses Array durchlaufen und eine Liste davon drucken, dies wird mit v-for ist einfach umzusetzen.

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

Im obigen Beispiel wird der Filter filterBy verwendet, um eine Liste zu filtern, die im 'category' 'Fruit' enthält, und die zurückgegebene Liste enthält nur die Liste mit dem Schlüsselwort 'Fruit', und der orderBy-Filter sortiert nach Preis aufsteigend, wenn Sie absteigend sortieren möchten, müssen Sie nur einen kleineren Parameter hinzufügen;

Benutzerdefinierter Filter

Obwohl VueJs uns viele starke Filter bietet, ist manchmal nicht genug. Zum Glück bietet Vue uns eine saubere und einfache Methode zur Definition unserer eigenen Filter, die wir dann mit dem Pipe "|" verwenden können.

Um einen globalen benutzerdefinierten Filter zu definieren, müssen Sie den Vue.filter() -Konstruktor verwenden. Dieser Konstruktor erfordert zwei Parameter.

Vue.filter() Constructor Parameters:

1.filterId: Filter-ID, die als einzigartige Kennzeichnung Ihres Filters dient;

2.filter function: Filterfunktion, die einen Parameter mit einer Funktion empfängt und diesen Parameter in das gewünschte Datenformat formatiert.

Im obigen Beispiel möchten wir den Preis des Produkts um5Wie setze ich einen Rabatt um? Es handelt sich um einen benutzerdefinierten Filter, der den Preis des Produkts reduziert5Rabatt; und um dies zu erreichen, müssen Sie das Folgende erledigen:

a、Erstellen Sie einen Filter namens discount mit dem Vue.filter() -Konstruktor

b、Geben Sie den Originalpreis des Produkts ein und erhalten Sie den Rabattpreis nach 50% Rabatt zurück

Der Code befindet sich unten:

Vue.filter('discount', function(value) {
  Rückgabewert * .5;
});
var product = new Vue({
  el: '.product',
  Daten: {
    Produkte: [
      {name: 'Apfel',preis: 25,Kategorie: "Obst"}, 
      {name: 'Banane',preis: 15,Kategorie: "Obst"}, 
      {name: 'Apfel',preis: 65,Kategorie: "Obst"}, 
      {name: 'BMW',preis: 2500,Kategorie: "Auto"},
      {name: 'Benz',preis: 10025,Kategorie: "Auto"}, 
      {name: 'Citrus',preis: 15,Kategorie: "Obst"}, 
      {name: 'Audi',preis: 25,Kategorie: "Auto"}
    ]
  },
) 

Jetzt können Sie den benutzerdefinierten Filter wie die Filter von Vue verwenden

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

Der obige Code setzt den Rabatt des Produkts um5Rabatt, und wenn Sie einen beliebigen Rabatt umsetzen möchten, sollten Sie einen Rabattwert hinzufügen und unseren Filter anpassen.

 Vue.filter('discount', function(value, discount) {
  Rückgabewert * (Rabatt / 100);
}); 

Dann rufen wir unseren Filter erneut auf

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

Wir können auch Filter in unseren Vue-Instanzen erstellen. Der Vorteil dabei ist, dass sie andere Vue-Instanzen, die diesen Filter nicht benötigen, nicht beeinflussen.

/*Globale Definition 
Vue.filter('Rabatt', function(value, Rabatt) {
  Rückgabewert * (Rabatt / 100 ) ;
});
*/
var product = new Vue({
  el: '.product',
  Daten: {
    Produkte: [
      {name: 'Apfel',preis: 25,Kategorie: "Obst"}, 
      {name: 'Banane',preis: 15,Kategorie: "Obst"}, 
      {name: 'Apfel',preis: 65,Kategorie: "Obst"}, 
      {name: 'BMW',preis: 2500,Kategorie: "Auto"},
      {name: 'Benz',preis: 10025,Kategorie: "Auto"}, 
      {name: 'Citrus',preis: 15,Kategorie: "Obst"}, 
      {name: 'Audi',preis: 25,Kategorie: "Auto"}
    ]
  },
  //Benutzerdefiniert in der Instanz
  Filter: {
    Rabatt: function(value, Rabatt) {
      Rückgabewert * (Rabatt / 100);
    }
  }
) 

Filter, die in der globalen Umgebung definiert sind, können in allen Instanzen aufgerufen werden. Wenn sie in einer Instanz definiert sind, können sie nur in dieser Instanz aufgerufen werden.　

Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und wir hoffen, dass Sie die Anleitung zur Lauterkeit大力支持.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem jeweiligen Urheber. Der Inhalt wurde von Internetnutzern freiwillig und eigenständig hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie urheberrechtlich geschützte Inhalte entdecken, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @, wenn Sie eine Beschwerde einreichen, und fügen Sie relevante Beweise bei. Sobald die Behauptung bestätigt wird, wird diese Seite den verdächtigen urheberrechtlichen Inhalt sofort löschen.)