Vue.js
Filtres personnalisés

Syntaxe

• Vue.filter(name, function(value){}); //De base
• Vue.filter(name, function(value, begin, end){}); // Basic avec les valeurs d'emballage
• Vue.filter(name, function(value, input){}); //Dynamique
• Vue.filter(name, { read: function(value){}, write: function(value){} }); // bidirectionnel

Paramètres

Filtres à deux voies

Avec un two-way filter , nous sommes en mesure d'attribuer une opération de read et d' write pour un filter unique qui modifie la valeur des mêmes données entre la view et le 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'
 */

De base

Les filtres personnalisés dans Vue.js peuvent être créés facilement dans un seul appel de fonction à Vue.filter .

//JS
Vue.filter('reverse', function(value) {
    return value.split('').reverse().join('');
});

//HTML
<span>{{ msg | reverse }}</span> //'This is fun!' => '!nuf si sihT'

Il est ./filters de stocker tous les filtres personnalisés dans des fichiers distincts, par exemple sous ./filters car il est alors facile de réutiliser votre code dans votre prochaine application. Si vous allez de cette façon, vous devez remplacer la partie JS :

//JS
Vue.filter('reverse', require('./filters/reverse'));

Vous pouvez également définir vos propres wrappers de begin et de 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'