Detaillierte Erläuterung der Implementierung und Anwendungsszenarien des Vue-Filters

1. Kurze Einführung

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:

<!-- in doppelten geschweiften Klammern -->
{{ Nachricht | Filter }}

<!-- In `v-bind` -->
<div v-bind:msg="Nachricht | Filter"></div>

Filterfunktionen erhalten immer den Wert eines Ausdrucks als erstes Argument.

Im obigen Beispiel erhält die Filterfunktion den Wert der Nachricht als erstes Argument.

1.1 Filter können in Reihe geschaltet werden

{{ Nachricht | FilterA | FilterB }}

In diesem Beispiel wird filterA als Filterfunktion definiert, die einen einzelnen Parameter akzeptiert. Der Wert der Ausdrucksnachricht wird als Parameter an die Funktion übergeben. Rufen Sie dann weiterhin die Filterfunktion FilterB auf, die ebenfalls für den Empfang eines einzelnen Parameters definiert ist, und übergeben Sie das Ergebnis von FilterA an FilterB.

1.2 Filter sind JavaScript-Funktionen, die Parameter empfangen können

{{ Nachricht | filterA('arg1', arg2) }}

filterA ist als Filterfunktion definiert, die drei Parameter akzeptiert. Der Wert der Nachricht ist der erste Parameter, die normale Zeichenfolge „arg1“ ist der zweite Parameter und der Wert des Ausdrucks arg2 ist der dritte Parameter.

2. Definieren Sie globale Filter in vue-cli

Syntax: Vue.filter( filterName, ( ) => { return // Datenverarbeitungsergebnisse} )

z.B:

<div id="app">
  <h3>{{Benutzername | addName}}</h3>
</div>
<Skript>
// Parameter 1: ist der Name des Filters, also die Verarbeitungsfunktion nach dem Pipe-Zeichen;
// Parameter 2: Verarbeitungsfunktion, die Parameter der Verarbeitungsfunktion sind die gleichen wie oben	
Vue.filter("addName",(Wert)=>{											            
    returniere "mein Name ist" + Wert
})
lass vm = neues Vue({
    el:"#app",
  	Daten:{
     Benutzername: „Xiaoming“ 
    }
})
</Skript>

2.1 Tatsächliche Entwicklung und Nutzung

Globale Filter werden häufig zur Datenänderung verwendet. Normalerweise extrahieren wir die Verarbeitungsfunktionen und fügen sie in eine JS-Datei ein.

// filter.js filelet filterPrice = (Wert) => {
	Rückgabewert 'erhalten' + Wert + 'Yuan'
}
let filterDate = (Wert) => {
    Rückgabewert + 'Tag'
}

Exportstandard {Filterpreis, Filterdatum}

Importieren Sie die obige Datei filter.js in main.js. Sie können die Datei filter.js auch in jede beliebige Komponente importieren, aber für globale Filter ist es am besten, sie in main.js zu definieren. Was importiert wird, ist ein Objekt. Verwenden Sie daher die Methode Object.keys(), um ein Array von Schlüsseln abzurufen, die Daten zu durchlaufen und den Schlüssel als Namen des globalen Filters anzugeben. Anschließend folgt die dem Schlüssel entsprechende Verarbeitungsfunktion, damit der globale Filter in jeder beliebigen Komponente verwendet werden kann:

//main.js
 
// Unten sind 2 Möglichkeiten zum Importieren aufgeführt. Die erste wird empfohlen: import * as filters from './utils/filter/filter'
// importiere {filterPrice,filterDate} aus './utils/filter/filter'
 
console.log(Filter)
 
Objekt.Schlüssel(Filter.Standard).fürJeden((Element)=>{
  Vue.filter(Element,Filter.Standard[Element])
})
 
neuer Vue({
  Router,
  speichern,
  rendern: h => h(App),
}).$mount('#app')

3. Verwenden Sie globale Filter in Komponenten:

//test.vue

<Vorlage>
  <div>
    <Eingabetyp="Text" v-Modell="Filteranzahl" >
    <div>{{filterCount | filterPrice}}</div>
    <div>{{filterCount | filterDate}}</div>
  </div>  
</Vorlage>

<Skript>
Standard exportieren {
  Daten(){
    zurückkehren {
      filterCount:1500
    }
  },
}
</Skript>

3. Definieren Sie lokale Filter in vue-cli

//test.vue

<Vorlage>
  <div>
    <Eingabetyp="Text" v-Modell="Filteranzahl" >
    <div>{{filterCount | filterPrice}}</div>
    <div>{{filterCount | filterDate}}</div>
  </div>  
</Vorlage>

<Skript>
Standard exportieren {
  Daten(){
    zurückkehren {
      filterCount:1500
    }
  },
}
</Skript>

4. Häufige Nutzungsszenarien

4.1 Datum (Uhrzeit) formatieren

Szenario 1: Vom Backend gesendete Uhrzeit: 2019-11-19T04:32:46Z

Installieren Sie moment.js

// Haupt.js

Moment aus „Moment“ importieren
// Globales Filter definieren - Zeitformat Vue.filter('format',function(val,arg){
  wenn(!val) zurückgeben;
  val = val.toString()
  Rückgabewert(Wert).Format(Argument)
})

//test.vue

<Vorlage>
   <div class="filter">{{Zeit | Format('JJJJ-MM-TT HH:MM:SS')}}</div>  
</Vorlage>

<Skript>
Standard exportieren {
  Daten(){
    zurückkehren {
      Zeit:'2019-11-19T04:32:46Z'
    }
  }
}
</Skript>

Zusammenfassen

Dies ist das Ende dieses Artikels über die Implementierung und Anwendungsszenarien von Vue-Filtern. Weitere relevante Inhalte zur Implementierung und Anwendung von Vue-Filtern finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!