Ricerca…


Sintassi

  • Vue.filter(name, function(value){}); //Di base
  • Vue.filter(name, function(value, begin, end){}); // Base con valori di avvolgimento
  • Vue.filter(name, function(value, input){}); //Dinamico
  • Vue.filter(name, { read: function(value){}, write: function(value){} }); // due vie

Parametri

Parametro Dettagli
nome String - nome callable desiderato del filtro
valore [Callback] Qualsiasi valore dei dati che passano nel filtro
inizio [Callback] Qualsiasi - valore in arrivo prima dei dati passati
fine [Callback] Qualsiasi valore che verrà dopo i dati passati
ingresso [Callback] Qualsiasi - input utente associato all'istanza Vue per risultati dinamici

Filtri a due vie

Con un two-way filter , siamo in grado di assegnare un'operazione di read e write per un singolo filter che modifica il valore degli stessi dati tra la view e il model .

//JS
Vue.filter('uppercase', {
    //read : model -> view
    read: function(value) {
        return value.toUpperCase();
    },

    //write : view -> model
    write: function(value) {
        return value.toLowerCase();
    }
});

/*
 * Base value of data: 'example string'
 *
 * In the view : 'EXAMPLE STRING'
 * In the model : 'example string'
 */

Di base

I filtri personalizzati in Vue.js possono essere creati facilmente in una singola chiamata a Vue.filter .

//JS
Vue.filter('reverse', function(value) {
    return value.split('').reverse().join('');
});

//HTML
<span>{{ msg | reverse }}</span> //'This is fun!' => '!nuf si sihT'

È buona norma memorizzare tutti i filtri personalizzati in file separati, ad es. Sotto ./filters in quanto è facile riutilizzare il codice nella prossima applicazione. Se vai in questo modo devi sostituire la parte JS :

//JS
Vue.filter('reverse', require('./filters/reverse'));

È inoltre possibile definire i propri begin e end involucri pure.

//JS
Vue.filter('wrap', function(value, begin, end) {
    return begin + value + end;
});

//HTML
<span>{{ msg | wrap 'The' 'fox' }}</span> //'quick brown' => 'The quick brown fox'


Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow