Filtres Vue.js

Les filtres sont la façon dont Vue.js nous permet d'appliquer la mise en forme et les transformations à une valeur utilisée dans une interpolation de modèle.

Les filtres sont une fonctionnalité fournie par les composants Vue qui vous permettent d'appliquer une mise en forme et des transformations à n'importe quelle partie des données dynamiques de votre modèle.

Ils ne modifient pas les données d'un composant ou quoi que ce soit, mais ils n'affectent que la sortie.

Disons que vous imprimez un nom:

<template>
  <p>Hi {{ name }}!</p>
</template>

<script> export default { data() { return { name: ‘Flavio’ } } } </script>

Et si vous voulez vérifier celanamecontient en fait une valeur, et sinon imprimer «là», de sorte que notre modèle affiche «Salut!»?

Entrez les filtres:

<template>
  <p>Hi {{ name | fallback }}!</p>
</template>

<script> export default { data() { return { name: ‘Flavio’ } }, filters: { fallback: function(name) { return name ? name : ‘there’ } } } </script>

Notez la syntaxe pour appliquer un filtre, qui est| filterName. Si vous êtes familier avec Unix, c'est l'opérateur de tube Unix, qui est utilisé pour passer la sortie d'une opération en tant qu'entrée à la suivante.

Lefiltersla propriété du composant est un objet. Un filtre unique est une fonction qui accepte une valeur et renvoie une autre valeur.

La valeur renvoyée est celle qui est réellement imprimée dans le modèle Vue.js.

Le filtre, bien sûr, a accès aux données et méthodes des composants.

Quel est un bon cas d'utilisation des filtres?

  • transformer une chaîne, par exemple, mettre en majuscule ou en minuscules
  • mise en forme d'un prix

Ci-dessus, vous avez vu un exemple simple de filtre:{{ name | fallback }}.

Les filtres peuvent être chaînés, en répétant la syntaxe du tube:

{{ name | fallback | capitalize }}

Ceci applique d'abord lefallbackfiltre, puis lecapitalizefiltre (que nous n'avons pas défini, mais essayez d'en créer un!).

Les filtres avancés peuvent également accepter des paramètres, en utilisant la syntaxe des paramètres de fonction normale:

<template>
  <p>Hello {{ name | prepend('Dr.') }}</p>
</template>

<script> export default { data() { return { name: ‘House’ } }, filters: { prepend: (name, prefix) => { return </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">prefix</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> } } } </script>

Si vous passez des paramètres à un filtre, le premier passé à la fonction de filtre est toujours l'élément dans l'interpolation du modèle (namedans ce cas), suivi des paramètres explicites que vous avez passés.

Vous pouvez utiliser plusieurs paramètres en les séparant à l'aide d'une virgule.

Remarquez que j'ai utilisé une fonction de flèche. Nous évitons la fonction de flèche dans les méthodes et les propriétés calculées en général car elles font presque toujours référencethispour accéder aux données du composant, mais dans ce cas, le filtre n'a pas besoin d'y accéder mais reçoit toutes les données dont il a besoin via les paramètres, et nous pouvons utiliser en toute sécurité la syntaxe de la fonction de flèche plus simple.

Ce packagea beaucoup de filtres prédéfinis que vous pouvez utiliser directement dans les modèles, qui incluentcapitalize,uppercase,lowercase,placeholder,truncate,currency,pluralizeet plus.

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: