Riepilogo dell'uso dei filtri in Vue.js

Il filtro è una funzione semplice che elabora i dati di input in tempo reale e restituisce un risultato di dati. Vue ha molti filtri convenienti, i filtri utilizzano spesso il simbolo di tubo “|”, ad esempio:

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

Filtro uppercase: filtro che trasforma la stringa di input in lettere maiuscole.

VueJs ti permette di chiamare catenatamente i filtri, in altre parole, l'output di un filtro diventa l'input del filtro successivo, quindi viene filtrato di nuovo. Di seguito, possiamo immaginare un esempio relativamente semplice che utilizza i filtri filterBy + orderBy di Vue per filtrare tutti i prodotti products. I prodotti filtrati appartengono alla categoria frutta.

Filtro filterBy: il valore del filtro deve essere un array, filterBy + condizione di filtro. La condizione di filtro è: 'string || function'+ in 'optionKeyName'

Filtro orderBy: il valore del filtro deve essere un array, orderBy + condizione di filtro. La condizione di filtro è: 'string || array ||function' + 'order ≥ 0 per crescente || order < 0 per decrescente'

Di seguito, possiamo guardare un altro esempio: abbiamo un array di prodotti products, e vogliamo percorrere questo array e stampare una lista, questo può essere facilmente realizzato con v-for.

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

L'esempio sopra utilizza il filtro filterBy per filtrare l'elenco che contiene la parola chiave 'frutta' in 'category', l'elenco restituito contiene solo parole chiave 'frutta', mentre il filtro orderBy esegue un ordine crescente per prezzo, se si desidera un ordine decrescente, è sufficiente aggiungere un parametro minore di 0;

Filtro personalizzato

Anche se VueJs ci offre molti filtri potenti, a volte non è sufficiente. Fortunatamente, Vue ci fornisce un modo pulito e semplice per definire i nostri filtri personalizzati, dopodiché possiamo utilizzare il tubo “|” per completare il filtraggio.

Per definire un filtro personalizzato globale, è necessario utilizzare il costruttore Vue.filter(). Questo costruttore richiede due parametri.

Parametri del costruttore Vue.filter():

1.filterId: ID del filtro, utilizzato come identificatore unico del filtro;

2.filter function: funzione di filtro, utilizzare una funzione per ricevere un parametro e poi formattare il parametro ricevuto come risultato di dati desiderato.

Nel esempio sopra, come si può realizzare un prodotto con un prezzo del 50%? In realtà, è un filtro personalizzato che riduce il prezzo del prodotto del 50%; per realizzarlo, è necessario completare:

a、Creare un filtro chiamato discount utilizzando il costruttore Vue.filter()

b、Inserire il prezzo originale del prodotto, e restituirà il prezzo di sconto del 50%

Ecco il codice:

Vue.filter('discount', function(value) {
  return value * .5;
});
var product = new Vue({
  el: '.product',
  data: {
    products: [
      {name: 'Mela',price: 25,category: "frutta"}, 
      {name: 'Banana',price: 15,category: "frutta"}, 
      {name: 'Pomelo',price: 65,category: "frutta"}, 
      {name: 'BMW',price: 2500,category: "auto"},
      {name: 'Benz',price: 10025,category: "auto"}, 
      {name: 'Citrus',price: 15,category: "frutta"}, 
      {name: 'Audi',price: 25,category: "auto"}
    ]
  ,
) 

Ora è possibile utilizzare i filtri personalizzati come i filtri integrati di Vue.

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

Il codice sopra applicato riduce il prezzo del prodotto del 50%, ma se si desidera applicare una sconto variabile, è necessario aggiungere un parametro di sconto nel filtro discount e modificare il nostro filtro.

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

Poi ricalliamo il nostro filtro

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

Possiamo anche costruire i nostri filtri all'interno dell'istanza Vue, il vantaggio di questo metodo è che non influenzerà altre istanze Vue che non necessitano di questo filtro.

/* definito globalmente */ 
Vue.filter('discount', function(value, discount) {
  return value * ( discount / 100 ) ;
});
*/
var product = new Vue({
  el: '.product',
  data: {
    products: [
      {name: 'Mela',price: 25,category: "frutta"}, 
      {name: 'Banana',price: 15,category: "frutta"}, 
      {name: 'Pomelo',price: 65,category: "frutta"}, 
      {name: 'BMW',price: 2500,category: "auto"},
      {name: 'Benz',price: 10025,category: "auto"}, 
      {name: 'Citrus',price: 15,category: "frutta"}, 
      {name: 'Audi',price: 25,category: "auto"}
    ]
  ,
  //Definito nell'istanza personalizzata
  filters: {
    discount: function(value, discount) {
      return value * (discount / 100);
    }
  }
) 

Le filtri definite globalmente possono essere chiamate in tutte le istanze, se definite nell'istanza, vengono chiamate nell'istanza.　

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento e che tu sostenga fortemente il tutorial di urla.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta ai rispettivi autori. Il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito web rimuoverà immediatamente i contenuti sospetti di violazione del copyright.