Vue.js
कस्टम फ़िल्टर

वाक्य - विन्यास

• Vue.filter(name, function(value){}); // बेसिक
• Vue.filter(name, function(value, begin, end){}); // रैपिंग वैल्यू के साथ बेसिक
• Vue.filter(name, function(value, input){}); // गतिशील
• Vue.filter(name, { read: function(value){}, write: function(value){} }); // दो-तरफा

पैरामीटर

दो तरफा फिल्टर

two-way filter , हम एक एकल filter लिए read एंड write ऑपरेशन को असाइन करने में सक्षम हैं जो view और 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'
 */

बुनियादी

में कस्टम फिल्टर Vue.js के लिए एक एकल समारोह कॉल में आसानी से बनाया जा सकता है Vue.filter ।

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

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

इसके तहत अलग-अलग फ़ाइलों जैसे सारे कस्टम फ़िल्टर स्टोर करने के लिए अच्छा अभ्यास है ./filters के रूप में यह तो अपने अगले आवेदन में अपने कोड को फिर से उपयोग करने के लिए आसान है। यदि आप इस तरह से जाते हैं तो आपको JS भाग को बदलना होगा :

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

आप अपनी begin और 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'