Vorwort
In diesem Tutorial werden wir VueJs-Filter anhand mehrerer Beispiele verstehen und erlernen. Voraussetzung für das Lesen dieses Artikels ist, dass Sie bereits über grundlegende Syntaxgrundlagen für Vue verfügen.
Grundlagen von Filtern in Vue.Js
Ein Filter ist eine einfache Funktion, die Daten rechtzeitig verarbeiten und durch Eingabe von Daten ein Datenergebnis zurückgeben kann. Vue verfügt über viele praktische Filter. Sie können sich auf die offizielle Dokumentation beziehen: http://cn.vuejs.org/api/#Filter. Filter verwenden normalerweise das Pipe-Zeichen „|“, wie zum Beispiel:
{{ msg | capitalize }}
// 'abc' => 'ABC'Großbuchstabenfilter: Ein Filter, der die Eingabezeichenfolge in Großbuchstaben umwandelt.
Mit VueJs können Sie Aufruffilter verketten. Einfach ausgedrückt wird die Ausgabe eines Filters zur Eingabe des nächsten Filters und dann erneut gefiltert. Als nächstes können wir uns ein relativ einfaches Beispiel vorstellen, bei dem Vues filterBy + orderBy-Filter zum Filtern aller Produkte verwendet wird. Bei den gefilterten Produkten handelt es sich um Fruchtprodukte.
filterBy-Filter: Der Wert des Filters muss ein Array sein, filterBy + Filterbedingung. Die Filterbedingung ist: 'string ||. function'+ in 'optionKeyName'
orderBy filter: Der Wert des Filters muss ein Array sein, orderBy + Filterbedingung. Die Filterbedingung lautet: 'string ||. array ||function' + 'order ≥ 0 für aufsteigende Reihenfolge || 0 für absteigende Reihenfolge'
Als nächstes können wir uns das folgende Beispiel ansehen: Wir haben Ein Produkt-Array-Produkt, wir möchten dieses Array durchlaufen und in eine Liste drucken. Dies ist mit v-for einfach zu erreichen.
<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 filterBy verwendet, um die Liste zu filtern, die das Schlüsselwort „Frucht“ in „Kategorie“ enthält. Die zurückgegebene Liste ist eine Liste, die nur „Frucht“ enthält. Schlüsselwort und der orderBy-Filter erstellt eine aufsteigende Reihenfolge basierend auf dem Preis. Wenn Sie absteigend bestellen möchten, müssen Sie nur einen Parameter hinzufügen, der kleiner als 0 ist.
Obwohl VueJs uns bereitstellt mit viel Ein leistungsstarker Filter, aber manchmal reicht es nicht aus. Glücklicherweise bietet uns Vue eine saubere und übersichtliche Möglichkeit, unsere eigenen Filter zu definieren, und dann können wir die Pipe „|“ verwenden, um die Filterung abzuschließen.
Um einen globalen benutzerdefinierten Filter zu definieren, müssen Sie den Konstruktor Vue.filter() verwenden. Dieser Konstruktor erfordert zwei Parameter.
Vue.filter() Constructor Parameters:
1.filterId: Filter-ID, wird als eindeutige Kennung Ihres Filters verwendet;
2.Filterfunktion: Filterfunktion , verwendet eine Funktion, um einen Parameter zu empfangen, und formatiert dann den empfangenen Parameter in das gewünschte Datenergebnis.
Was müssen wir im obigen Beispiel tun, um einen Rabatt von 50 % auf den Produktpreis zu erzielen? Tatsächlich handelt es sich um einen implementierten benutzerdefinierten Filter, was bedeutet, dass der Preis des Produkts um 50 % reduziert wird. Um ihn zu implementieren, müssen Sie Folgendes tun:
Verwenden Sie den Vue.filter(). Konstruktor zum Erstellen eines Filters. Das Tool heißt Rabatt
b. Geben Sie den Originalpreis des Produkts ein, um den rabattierten Preis nach 50 % Rabatt zurückzugeben
Der Code lautet wie folgt:
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: "汽车"}
]
},
})Jetzt können Sie benutzerdefinierte Filter genau wie Vues eigene Filter verwenden
<ul class="product">
<li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 0">
{{product.name}}-{{product.price|discount | currency}}
</li>
</ul>Die durch den obigen Code implementierten Produkte werden um 50 % rabattiert , und wenn Sie es umsetzen möchten, wird der Preis reduziert. Wie sieht es mit Rabatten aus? Wir sollten dem Rabattfilter einen Rabattwertparameter hinzufügen und unseren Filter ändern.
Vue.filter('discount', function(value, discount) {
return value * (discount / 100);
});Dann rufen Sie unseren Filter erneut auf
<ul class="product">
<li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 0">
{{product.name}}-{{product.price|discount 25 | currency}}
</li>
</ul>Wir können unseren Filter auch in unserer Vue-Instanz erstellen, der Vorteil von Diese Struktur hat keinen Einfluss auf andere Vue-Instanzen, die diesen Filter nicht verwenden müssen.
/*定义在全局
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);
}
}
})Wenn der Filter global definiert ist, kann er in allen Instanzen aufgerufen werden. Wenn er in einer Instanz definiert ist, wird der Filter in der Instanz aufgerufen.
Zusammenfassung
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels für alle beim Erlernen oder Verwenden von Vue hilfreich sein kann eine Botschaft zum Mitteilen.
Ausführlichere Erklärungen zu Vue.js-Filtern finden Sie auf der chinesischen PHP-Website!
