Vue.js
Filtri personalizzati
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