So verwenden Sie den Vue-Filter

Überblick

Vor vue2.0 gab es integrierte Filter. In 2.0 gibt es keine integrierten Filter, aber wir können Filter anpassen.

Zu Vue-Filtern heißt es in der offiziellen Dokumentation:

Vue.js ermöglicht es Ihnen, Ihre eigenen Filter zu definieren, die für einige gängige Textformatierungen verwendet werden können. Filter können an zwei Stellen verwendet werden: Interpolation mit doppelten geschweiften Klammern und V-Bind-Ausdrücken (letzteres wird seit 2.1.0+ unterstützt). Filter sollten am Ende eines JavaScript-Ausdrucks hinzugefügt werden, gekennzeichnet durch das „Pipe“-Symbol.

Das heißt, ein Filter ist eine Funktion zum Formatieren von Daten. Der Filter ändert die Originaldaten nicht. Seine Funktion besteht darin, die Daten zu filtern, d. h. die Daten zu verarbeiten und die verarbeiteten Daten zurückzugeben, z. B. einige Änderungen am Datenformat, Statuskonvertierung usw. vorzunehmen.

Es gibt zwei Arten von Filtern

• Filter innerhalb von Komponenten (gültig innerhalb von Komponenten)
• Globale Filter (von allen Komponenten gemeinsam genutzt)

Filter definieren

Der erste Parameter ist der Name des Filters.

Der zweite Parameter ist die Funktion des Filters (wenn vue nicht definiert ist, wissen Sie nicht, was diese Zeichenfolge ist und was sie tut).

Filterfunktionen

• Deklarationsfunktion (Daten, argv1, argv2...) {}
• Der erste Parameter sind die zu filternden Daten, also der Inhalt links vom Pipe-Zeichen beim Aufruf.
• Ab dem zweiten Parameter handelt es sich um die Parameter, die beim Aufruf des Filters übergeben werden.

Verwendung von Filtern

Erst registrieren, später nutzen

In der Komponente gibt filters:{ filter name: fn } die endgültigen Daten durch return in fn zurück.

Global Vue.filter('Filtername',fn) gibt die endgültigen Daten durch Return in fn zurück.

Verwenden Sie {{ data | filter name }}

// Wenn Sie Filter verwenden, müssen Sie als Trennzeichen ein Pipe-Symbol ( | ) hinzufügen. Der Filtername befindet sich rechts vom Pipe-Symbol |, das die Funktion des Textes darstellt.
<!-- in doppelten geschweiften Klammern -->
{{ Nachricht | Filtername}}
​
<!-- In `v-bind` -->
<div v-bind:id="id | Filtername"></div>

Benutzerdefinierte globale Filter

Vue.filter('Filtername', Funktion(Wert) { // Wert stellt die zu verarbeitenden Daten dar // Filtergeschäftslogik, muss einen Rückgabewert haben})
​
<div>{{ msg | Filtername}}</div>
<div v-bind="msg | Filtername"></div>

Lokaler Filter

Daten () {
    zurückkehren {
        Nachricht: „Hallo Welt“
    }
},
//Definieren Sie private lokale Filter. Filter können nur im aktuellen Vue-Objekt verwendet werden: {
    dataFormat: (msg, a) => { // msg stellt die zu filternden Daten dar, a stellt den eingehenden Parameter dar return msg + a;
    }
}
​
<p>{{ msg | dataFormat('!')}}</p> // Ergebnis: Hallo Welt!

Vorsichtsmaßnahmen

1. Bei der globalen Registrierung handelt es sich um einen Filter ohne s, während Komponentenfilter Filter mit s sind. Obwohl beim Schreiben ohne s kein Fehler auftritt, ist der Filter wirkungslos.

2. Wenn die Namen globaler Filter und lokaler Filter wiederholt werden, werden sie nach dem Prinzip der Nähe aufgerufen, d. h. der lokale Filter wird vor dem globalen Filter aufgerufen

3. Ein Ausdruck kann mehrere Filter verwenden. Die Ausführungsreihenfolge ist von links nach rechts. Das Ergebnis des vorherigen Filters wird als verarbeitete Daten des nächsten Filters verwendet. Achten Sie daher auf die Verwendungsreihenfolge.

Wer mit Vue vertraut ist, weiß, dass Filter manchmal den Zweck der Verarbeitung von Daten wie Methoden, Berechnungen und Beobachtungen erfüllen können, diese jedoch nicht ersetzen können, da sie den ursprünglichen Wert nicht ändern können. Wenn die interne Struktur eines Filters besonders komplex ist, können Sie ihn als berechnete Eigenschaft schreiben, da die berechnete Eigenschaft selbst über einen Cache verfügt und in hohem Maße wiederverwendbar ist, während Filter im Allgemeinen zum Ausführen einiger einfacher Vorgänge verwendet werden.

In der tatsächlichen Entwicklung werden globale Filter häufiger verwendet als lokale Filter. Um es ganz klar auszudrücken: Warum verwenden wir Filter? Tatsächlich ist es dasselbe wie die Verwendung von Funktionen. Einige Methoden sind für die Verwendung durch andere Komponenten gekapselt, was den Aufruf bequemer und schneller macht.

Wie wir alle wissen, werden globale Filter in main.js definiert. Wenn das Projekt jedoch zu groß ist und mehrere Filter enthält, wird main.js zu einem Haufen Code. Für die Modularisierung des Projekts ist es am besten, ein spezielles Verzeichnis zu haben, in dem diese Filter einheitlich gespeichert werden, und dann die Verarbeitungsfunktionen zu extrahieren und in einer JS-Datei abzulegen. Der Beispielcode wird unten angezeigt.

Beispiel 1 (lokaler Filter)

Formatieren Sie die Uhrzeit oder das Datum, geben Sie die angegebene Anzahl von Ziffern ein und geben Sie 0 ein, wenn die Zahl weniger als eine Ziffer hat

// filter/index.js Datei exportiert Standard {
    Datumsformat: Wert => {
        const dt = neues Datum (Wert * 1000)
    
        const y = dt.getFullYear()
        const m = (dt.getMonth() + 1 + '').padStart(2, '0') // .padStart(angegebene Anzahl Ziffern, "einzufüllendes Zeichen oder Wert")
        const d = (dt.getDay() + '').padStart(2, '0')
        
        const hh = (dt.getHours() + '').padStart(2, '0')
        const mm = (dt.getMinutes() + '').padStart(2, '0')
        const ss = (dt.getSeconds() + '').padStart(2, '0')
        
        gibt `${y}-${m}-${d} ${hh}:${mm}:${ss}` zurück
    }
}
​
// Lokale Filter in .vue-Dateien verwenden <script>
    Filter aus „../filter“ importieren
​
    Standard exportieren {
        ... ... 
        Filter: { ...Filter },
        Daten() {
            zurückkehren {}
        }
    }
</Skript>
​
<div> Datum: {{ date | dateFormat }} </div>

Beispiel 2 (globaler Filter)

Echo gängiger Wörterbucheinträge: Beispielsweise Geschlecht, männlich oder weiblich oder allgemeine Auswahl. Die vom Backend an uns gesendeten Daten sind 0 oder 1, und wir müssen männlich oder weiblich oder ja oder nein auf der Seite anzeigen

// Datei „constants/dictionary.js“​
exportiere const GENDER_MENU = [
    { code: 0, label: 'Männlich'},
    { Code: 1, Label: 'Weiblich'}
];
​
exportiere const COMMON_MENU = [
    { Code: 0, Label: 'Nein'},
    { Code: 1, Bezeichnung: "Ja"}
];
​
Standard exportieren {
    GENDER_MENU, COMMON_MENU
}

filter/dict.js-Datei

// filter/dict.js-Datei​
Dict aus '../constants/dictionary' importieren
​
exportiere const genderMenu = {
    Funktion: Wert => {
        const Ziel = Dict.GENDER_MENU.filter(item => {
            gibt Artikelcode = Wert zurück;
        })
        Ziellänge zurückgeben? Ziel[0].Bezeichnung : Wert;
    }
}
​
exportiere const commonMenu = {
    Funktion: Wert => {
        const Ziel = Dict.COMMON_MENU.filter(item => {
            gibt Artikelcode = Wert zurück;
        })
        Ziellänge zurückgeben? Ziel[0].Bezeichnung : Wert;
    }
}

Datei „filter/index.js“

// filter/index.js-Datei​
importiere * als Filter aus './dict' // Filterfunktion importieren​
const Installieren = Vue => {
    // Der importierte Filter ist ein Objekt. Verwenden Sie die Methode Object.keys(), um ein Array von Schlüsseln zu erhalten. Iterieren Sie über die Daten und verwenden Sie den Schlüssel als Namen des globalen Filters. Auf den Schlüssel folgt die entsprechende Verarbeitungsfunktion. Auf diese Weise kann der globale Filter in jeder Komponente verwendet werden. Object.keys(filters).forEach(key => {
        Vue.filter(Schlüssel, Filter[Schlüssel].Funktion)
    })
    /*
    für(const _filter in Filter) {
        Vue.filter(`${_filter}`, Filter[_filter].Funktion)
    } */
}
​
Standard exportieren Installieren

main.js-Datei

// main.js-Datei​
... ...
Filter aus './../filter/index' importieren
Vue.use(Filter)
... ...

Verwenden globaler Filter in .vue-Dateien

// Globale Filter in .vue-Dateien verwenden​
<p>Geschlecht: {{ gender | genderMenu }}</p>

Oben finden Sie Einzelheiten zur Verwendung des Vue-Filters. Weitere Informationen zum Vue-Filter finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!