Vue.js
Aangepaste filters
Zoeken…
Syntaxis
-
Vue.filter(name, function(value){});
// Basic -
Vue.filter(name, function(value, begin, end){});
// Basic met inpakwaarden -
Vue.filter(name, function(value, input){});
//Dynamisch -
Vue.filter(name, { read: function(value){}, write: function(value){} });
// Twee-weg
parameters
Parameter | Details |
---|---|
naam | String - gewenste opvraagbare naam van het filter |
waarde | [Terugbellen] Elke - waarde van de gegevens die het filter passeren |
beginnen | [Terugbellen] Elke - waarde die vóór de doorgegeven gegevens moet komen |
einde | [Terugbellen] Elke - waarde die volgt op de doorgegeven gegevens |
invoer | [Terugbellen] Alle - gebruikersinvoer gebonden aan Vue-instantie voor dynamische resultaten |
Tweerichtingsfilters
Met een two-way filter
kunnen we een read
en write
toewijzen voor een enkel filter
dat de waarde van dezelfde gegevens tussen de view
en het 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'
*/
basis-
Aangepaste filters in Vue.js
kunnen eenvoudig worden gemaakt in een enkele functie-aanroep naar Vue.filter
.
//JS
Vue.filter('reverse', function(value) {
return value.split('').reverse().join('');
});
//HTML
<span>{{ msg | reverse }}</span> //'This is fun!' => '!nuf si sihT'
Het is een goede gewoonte om alle aangepaste filters in afzonderlijke bestanden op te slaan, bijvoorbeeld onder ./filters
omdat het dan eenvoudig is om uw code opnieuw te gebruiken in uw volgende toepassing. Als u deze kant op gaat, moet u het JS-onderdeel vervangen :
//JS
Vue.filter('reverse', require('./filters/reverse'));
U kunt ook uw eigen definiëren begin
en end
wrappers ook.
//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
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow