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