Comment appliquer de manière conditionnelle une classe CSS dans Vue.js –

Il est parfois nécessaire de modifier les classes CSS d’un élément au moment de l’exécution. Mais lorsque vous changez de classe, il est parfois préférable d’appliquer des détails de style de manière conditionnelle. Par exemple, imaginez que votre vue possède un pageur. Les téléavertisseurs sont souvent utilisés pour parcourir de plus grands ensembles d’articles. Lors de la navigation, il peut être utile de montrer à l’utilisateur la page sur laquelle il se trouve. Le style de l'élément est défini de manière conditionnelle, en fonction de la page actuellement affichée.

Dans ce cas, un pager peut ressembler à ceci:

Dans cet exemple, il comporte cinq pages. Une seule de ces pages est sélectionnée à la fois. Si vous avez construit ce pager avec Bootstrap, la page sélectionnée aura une classe CSS appelée active appliquée. Vous ne souhaitez appliquer cette classe que si la page est la page actuellement affichée. En d’autres termes, vous voudriez conditionnellement appliquer la classe active CSS. Heureusement, Vue fournit un moyen d’appliquer de manière conditionnelle une classe CSS à un élément, ce que je vais illustrer dans cet article

Pour appliquer une classe CSS de façon conditionnelle au moment de l’exécution, vous pouvez vous lier à un objet JavaScript. Pour réussir cette tâche, vous devez suivre deux étapes. Tout d'abord, vous devez vous assurer que votre classe CSS est définie. Ensuite, vous créez les liaisons de classe dans votre modèle. Je vais expliquer chacune de ces étapes en détail dans la suite de cet article.

Étape 1: définissez vos classes CSS

Imaginons un instant que les cinq éléments de page affichés dans l'image ci-dessus aient été définis. utilisant le code HTML suivant:

Vous remarquerez que chaque page de cet extrait de code comporte un élément liste (]. ). Cet élément fait référence à la classe CSS page-item . Dans le code de cet article, cette classe est définie dans le framework CSS Bootstrap. Cependant, si cela n’était pas défini ici, il vous incomberait de vous assurer que cela a été défini quelque part. La deuxième classe CSS est toutefois celle qui convient le mieux à cet article.

La classe CSS active est utilisée pour identifier la page actuellement sélectionnée. Pour cet article, cette classe CSS est également définie dans le CSS Bootstrap. Comme indiqué dans l'extrait de code ci-dessus, la classe active est utilisée uniquement dans le troisième élément de liste . Comme vous pouvez probablement le deviner, il s’agit de la classe CSS que vous souhaitez appliquer de manière conditionnelle. Pour ce faire, vous devez ajouter un objet JavaScript.

Étape 2: Créez vos liaisons de classe

Construisons sur le fragment de code présenté à l'étape 1. Lors de la création de liaisons de classe dans votre modèle, vous avez le choix entre deux choix principaux: en utilisant la syntaxe de l'objet ou en utilisant la syntaxe du tableau. Je vais vous montrer comment utiliser les deux approches dans la suite de cet article.

Liaison à l'aide de la syntaxe d'objet

Pour créer une liaison de classe à l'aide de la syntaxe d'objet, vous devez utiliser une expression JavaScript . L’expression que nous allons utiliser est visible dans le code associé à cet article ici . Ce code pertinent ressemble à ceci:

J'ai réduit la quantité de code en utilisant la directive de Vue cuite-in v-for . Cette directive est utilisée pour rendre les éléments dans une boucle. Les éléments de cet exemple sont les pages elles-mêmes. Au-delà de l'utilisation de la directive v-pour notez l'utilisation de la directive v-bind .

La commande v-bind connecte l'élément class attribut à l'instance Vue. Cette instance de Vue est définie comme suit:

 var app = new Vue ({
  el: '#myApp',
  Les données: {
    nombre total de pages: 5,
    currentPage: 3
  }
});

Cette instance de Vue va droit au but. L'objet data ci-dessus comprend une propriété nommée currentPage . Si vous revisitez le modèle HTML défini ci-dessus, vous remarquerez que cette propriété est référencée. En fait, l'objet JavaScript associé à chaque liaison de classe ressemble à ceci:

 {'page-item': true, 'active' :( page === currentPage)}

Cet objet définit deux propriétés: page-item et active . Ce sont notamment les noms des deux classes CSS décrites à l'étape 1. À l'étape 2, ces deux références de classe sont devenues des noms de propriétés dans un objet JavaScript. Les valeurs associées à ces noms de propriété sont des expressions JavaScript. Si l'expression est évaluée comme une vérité, la classe CSS sera incluse. Si l'expression est évaluée à false la classe CSS ne sera pas . Avec ces règles à l’esprit, regardons chaque propriété.

La première propriété, page-item a une valeur de true . Cette valeur codée en dur est utilisée car nous souhaitons toujours inclure la classe élément de page . La deuxième propriété, active utilise une expression JavaScript. Lorsque cette expression est vraie la classe active sera appliquée. Cela nous autorise à appliquer de manière conditionnelle la classe active basée sur la valeur de currentPage . Une autre façon d'appliquer conditionnellement la classe active consiste à lier un tableau Array .

Liaison à l'aide de la syntaxe de tableau

Vue permet d'appliquer une liste de classes CSS en liant à un Tableau . Si vous souhaitez utiliser la syntaxe Array le code HTML présenté à l'étape 1 devient:

Une version en cours d'exécution avec la syntaxe Array peut être vue ici . La seule différence est l'utilisation d'un Array sur la liaison de classe. Cette approche alternative suppose l’existence de deux propriétés supplémentaires dans l’objet de données de votre Vue . Ces deux propriétés sont: pageItemClass et activeClass . Le code d'initialisation Vue mis à jour avec ces propriétés ressemble à ceci:

 var app = new Vue ({
  el: '#myApp',
  Les données: {
    nombre total de pages: 5,
    currentPage: 3,
    pageItemClass: 'page-item',
    activeClass: 'active'
  }
});

Comme vous pouvez le constater, la taille de l'objet de données a augmenté, mais le code du modèle est légèrement plus net lorsque vous utilisez la syntaxe Array . La syntaxe de l'objet est un peu plus compacte. Le choix entre la syntaxe d'objet et la syntaxe Array dépend de préférences personnelles.

Les deux approches peuvent sembler compliquer davantage votre modèle HTML. Cependant, il se passe plus de choses ici. En réalité, nous séparons les préoccupations. Nous créons un modèle basé sur des données. Cela rend la vue plus facile à tester et à maintenir à mesure que l'application grandit.

Wrap Up

J'espère que vous avez trouvé cet article précieux. Si vous souhaitez en savoir plus sur Vue.js, pourquoi ne pas consulter certains de nos autres contenus de Vue ici sur SitePoint. Sinon, vous pouvez me trouver sur Twitter @chadcampbell . Encore une fois merci!

Chad est un consultant indépendant en logiciels, quintuple Microsoft MVP, auteur. et orateur. Il est également le fondateur de Ecofic et le créateur du cours de formation Vue.js: Getting Started .