Vue.js
Anpassade filter
Sök…
Syntax
-
Vue.filter(name, function(value){});
//Grundläggande -
Vue.filter(name, function(value, begin, end){});
// Grundläggande med inslagningsvärden -
Vue.filter(name, function(value, input){});
//Dynamisk -
Vue.filter(name, { read: function(value){}, write: function(value){} });
// Tvåvägs
parametrar
Parameter | detaljer |
---|---|
namn | Sträng - önskat kalibrerbart namn på filtret |
värde | [Återuppringning] Valfritt värde på data som passerar in i filtret |
Börja | [Återuppringning] Vilket värde som ska komma framför de skickade uppgifterna |
slutet | [Återuppringning] Vilket värde som kommer efter de skickade uppgifterna |
inmatning | [Återuppringning] Vilken som helst - användarinmatning bunden till Vue-instans för dynamiska resultat |
Tvåvägsfilter
Med ett two-way filter
kan vi tilldela en read
och write
för ett enda filter
som ändrar värdet på samma data mellan view
och 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'
*/
Grundläggande
Anpassade filter i Vue.js
kan enkelt skapas i ett enda funktionssamtal till Vue.filter
.
//JS
Vue.filter('reverse', function(value) {
return value.split('').reverse().join('');
});
//HTML
<span>{{ msg | reverse }}</span> //'This is fun!' => '!nuf si sihT'
Det är god praxis att lagra alla anpassade filter i separata filer, t.ex. under ./filters
eftersom det då är lätt att återanvända din kod i din nästa applikation. Om du går detta måste du byta ut JS-delen :
//JS
Vue.filter('reverse', require('./filters/reverse'));
Du kan också definiera egna begin
och end
omslag också.
//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
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow