Vue.js
Niestandardowe filtry
Szukaj…
Składnia
-
Vue.filter(name, function(value){});
//Podstawowy -
Vue.filter(name, function(value, begin, end){});
// Podstawowe z wartościami zawijania -
Vue.filter(name, function(value, input){});
//Dynamiczny -
Vue.filter(name, { read: function(value){}, write: function(value){} });
// Dwukierunkowa
Parametry
Parametr | Detale |
---|---|
Nazwa | String - żądana nazwa filtru na żądanie |
wartość | [Oddzwonienie] Dowolna - wartość danych przekazywanych do filtra |
zaczynać | [Oddzwonienie] Dowolna - wartość pojawiająca się przed przekazanymi danymi |
koniec | [Oddzwonienie] Dowolna - wartość, która nastąpi po przekazanych danych |
Wejście | [Oddzwonienie] Dowolny - dane wejściowe użytkownika powiązane z instancją Vue w celu uzyskania dynamicznych wyników |
Filtry dwukierunkowe
Dzięki two-way filter
jesteśmy w stanie przypisać operację read
i write
do pojedynczego filter
który zmienia wartość tych samych danych między view
a 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'
*/
Podstawowy
Niestandardowe filtry w Vue.js
można łatwo utworzyć w jednym wywołaniu funkcji do Vue.filter
.
//JS
Vue.filter('reverse', function(value) {
return value.split('').reverse().join('');
});
//HTML
<span>{{ msg | reverse }}</span> //'This is fun!' => '!nuf si sihT'
Dobrą praktyką jest przechowywanie wszystkich filtrów niestandardowych w osobnych plikach, np. Pod ./filters
ponieważ wówczas można łatwo ponownie użyć kodu w następnej aplikacji. Jeśli pójdziesz tą drogą, musisz wymienić część JS :
//JS
Vue.filter('reverse', require('./filters/reverse'));
Możesz także zdefiniować własne begin
i end
.
//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
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow