filters Archives | Web Programiranje

Uvod

Vue filter je u suštini funkcija koja uzima vrednost, obrađuje je, a zatim vraća obrađenu vrednost. Filteri nisu zamene za metode, computed properties ili watch svojstva, jer filteri ne transformišu podatke, već samo transformiše izlaz koji korisnik vidi.

Vue.js filteri

Filteri mogu da se nadovezuju jedan na drugi i kao sve funkcije mogu da prime argumente. Kada se koristi filter, njegov kontekst je postavljen na instancu koja se poziva na njega, stoga i ključna reč “this” ukazuje na nju.

Spisak sajtova koji nude pripremljene filtere:

Registrovanje filtera

Filteri mogu da se registruju globalno i lokalno.

Lokalno registrovanje

filters: {
  filterName(value) {
    return // thing to transform
  }
}

filters: {

filterName(value) {

return // thing to transform

}

Globalno registrovanje

Vue.filter('filterName', function(value) {
  return // thing to transform
});

Vue.filter('filterName', function(value) {

return // thing to transform

});

NAPOMENA:
Kod koji definiše filter globalno mora da bude napisan pre koda koji definiše instancu

Primer

U ovome primeru definišemo filter koji transformiše izlaz teksta tako da početak svake nove reči počinje velikim slovom.

Vue.filter('camel',function(str){
    return str.toLowerCase().replace(/^\w|\s\w/g, function (letter) {
        return letter.toUpperCase();
    })
})
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

Vue.filter('camel',function(str){

return str.toLowerCase().replace(/^\w|\s\w/g, function (letter) {

return letter.toUpperCase();

})

new Vue({

el: '#app',

template: '<App/>',

components: { App }

})

Korišćenje filtera

Filteri mogu da se implementiraju na dva načina: mustache interpolations i v-bind expressions

a) Integracija sa interpolacijom

Filteri se integrišu kao izraz za interpolaciju tako što se nadovezuju izraz koji treba da transformišu sa specijalnim znakom “|” (eng. pipe):

{{ message | nazivFiltera }}

1	{{ message \| nazivFiltera }}

Filteri modu da se nadovezuju:

{{ message | filterA | filterB }}

1	{{ message \| filterA \| filterB }}

A pošto su filteri u stvari funkcije onda mogu i da prime argumente:

{{ message | filterA('arg1', arg2) }}

1	{{ message \| filterA('arg1', arg2) }}

Primer

See the Pen Filter by Web programiranje (@chos) on CodePen.

b) Integracija sa v-bind

<div v-bind:id="rawId | nazivFiltera"></div>

1	<div v-bind:id="rawId \| nazivFiltera"></div>