Close
Cliquez ici pour la documentation v3.x.

Guide

You’re browsing the documentation for v2.x and earlier. For v3.x, click here.

Filtres

Vue.js permet de définir des filtres qui peuvent être utilisés pour appliquer des formatages de textes courants. Les filtres sont utilisables à deux endroits : les interpolations à moustaches et les expressions de v-bind (ces dernières étant supportées depuis la 2.1.0+). Les filtres doivent être ajoutés à la fin de l’expression JavaScript, indiqués par le symbole de la barre verticale :

<!-- dans les moustaches -->
{{ message | capitalize }}

<!-- dans les v-bind -->
<div v-bind:id="rawId | formatId"></div>

Vous pouvez définir les filtres locaux dans les options d’un composant :

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

ou définir un filtre globalement avant de créer l’instance de Vue :

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

Quand le filtre global a le même nom que le filtre local, le filtre local va être préféré.

Ci-dessous un exemple du filtre capitalize en action :

{{ message | capitalize }}

La fonction de filtre reçoit toujours la valeur de l’expression (le résultat de la chaine) comme premier argument. Dans cet exemple, la fonction de filtre capitalize va recevoir la valeur de message dans son argument.

Les filtres peuvent être chainés :

{{ message | filterA | filterB }}

Dans ce cas, filterA, défini avec un seul argument, va recevoir la valeur de message. Puis la fonction filterB va être appelée avec le résultat de filterA passé dans filterB en tant que simple argument.

Les filtres sont des fonctions JavaScript et peuvent donc recevoir des arguments :

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

Ici filterA est définie comme une fonction prenant trois arguments. La valeur de message va être passée en premier argument. La chaine de caractères 'arg1' sera passée au filtre filterA en tant que second argument, et la valeur de l’expression arg2 sera évaluée et passée en tant que troisième argument.

← Plugins Composants monofichiers →
Une erreur dans cette page ou une envie de contribuer à la traduction ? Éditez cette page sur GitHub !