Comment appliquer conditionnellement une classe CSS dans Vue.js

Explication détaillée de la méthode d'application conditionnelle des classes CSS dans Vue.js

Points de base:

• Dans vue.js, l'application conditionnelle des classes CSS peut être implémentée en liant des objets JavaScript aux attributs class. Les attributs de l'objet correspondent au nom de classe CSS, et sa valeur est une expression JavaScript, qui détermine s'il faut appliquer la classe.
• vue.js fournit deux syntaxes pour créer des liaisons de classe: syntaxe d'objet et syntaxe du tableau. La syntaxe des objets est plus concise, tandis que la syntaxe du tableau peut rendre le code de modèle plus clair. La grammaire à choisir dépend de la préférence personnelle.
• vue.js prend en charge plusieurs méthodes de liaison des classes conditionnelles, y compris à l'aide d'opérateurs ternaires, une syntaxe d'objet pour lier plusieurs classes, en utilisant des propriétés calculées, en combinant des classes statiques et de liaison et des styles de liaison conditionnels de liaison.

Parfois, la classe CSS qui doit être modifiée au moment de l'exécution. Mais lors de la modification des cours, il est parfois préférable d'appliquer les détails du style conditionnellement. Par exemple, supposons que votre vue ait un téléavertisseur. Les téléavertisseurs sont souvent utilisés pour naviguer dans des ensembles de projets plus grands. Lors de la navigation, il est utile à l'utilisateur d'afficher les informations sur la page actuelle. Le style de projet est définie conditionnellement en fonction de la page actuellement consultée. Dans ce cas, le téléavertisseur pourrait ressembler à ceci:

Il y a cinq pages dans cet exemple, une seule page peut être sélectionnée à la fois. Si vous créez ce téléavertisseur avec Bootstrap, la page sélectionnée appliquera une classe CSS nommée active. Cette classe n'est requise que si la page est actuellement consultée. En d'autres termes, la classe CSS doit être appliquée conditionnellement. Heureusement, Vue fournit un moyen d'appliquer conditionnellement les cours CSS aux éléments de l'exécution, que je démontrerai dans cet article. Pour appliquer conditionnellement les classes CSS à l'exécution, vous pouvez vous lier à un objet JavaScript. Pour terminer avec succès cette tâche, deux étapes doivent être effectuées. Tout d'abord, vous devez vous assurer que la classe CSS est définie. Ensuite, créez la liaison de classe dans le modèle. J'expliquerai ces étapes en détail dans le reste de cet article. active

Étape 1: Définissez la classe CSS

Supposons que les éléments de cinq pages affichés dans l'image ci-dessus utilisent la définition HTML suivante:

Notez que chaque page de cet extrait de code a un élément d'élément de liste (l'élément d'élément de troisième liste a une classe

). Comme vous pouvez le deviner, il s'agit d'une classe CSS que vous souhaitez appliquer conditionnellement. Pour ce faire, vous devez ajouter un objet JavaScript.

<code class="language-html"><div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div></code>

active Étape 2: Créez une classe de liaison

Lors de la création de liaisons de classe dans un modèle, il existe deux options principales: utilisez une syntaxe d'objet ou utilisez la syntaxe du tableau. Je vais vous montrer comment utiliser les deux méthodes dans le reste de cet article.

liaison à l'aide de la syntaxe d'objet

Pour créer des liaisons de classe à l'aide de la syntaxe d'objet, les expressions JavaScript doivent être utilisées. Les expressions que nous utiliserons peuvent être vues dans le code lié à cet article. Le code pertinent est le suivant:

<code class="language-html"><div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div></code>

réduit la quantité de code en utilisant la directive intégrée de Vue v-for. Cette directive est utilisée pour rendre des projets en boucle. L'élément de cet exemple est la page elle-même. En plus d'utiliser la commande v-for, vous devez également faire attention à l'utilisation de la commande v-bind. La directive v-bind connecte l'attribut class de l'élément à l'instance Vue. L'instance Vue est définie comme suit:

<code class="language-html"><div id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" :class="{'page-item':true, 'active':(page === currentPage)}">
        <a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div></code>

Cette instance Vue est très simple. L'objet ci-dessus data contient une propriété nommée currentPage. Si vous revisitez le modèle HTML défini ci-dessus, vous remarquerez que cette propriété est en cours de référence. En fait, l'objet JavaScript associé à chaque liaison de classe ressemble à ceci:

<code class="language-javascript">var app = new Vue({
  el: 'https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyApp',
  data: {
    totalPages: 5,
    currentPage: 3
  }
});</code>

Cet objet définit deux propriétés: page-item et active. Il convient de noter que ce sont les deux noms de classe CSS discutés à l'étape 1. À l'étape 2, ces deux références de classe sont devenues des noms de propriétés dans l'objet JavaScript. La valeur associée à ces noms de propriétés est une expression JavaScript. Si l'expression évalue les valeurs vraies, la classe CSS sera incluse. Si l'expression évalue False, ne contiendra pas la classe CSS. Avec ces règles à l'esprit, regardons chaque attribut. La valeur de la première propriété est page-item. Cette valeur codée en dur est utilisée car la classe true est toujours requise. La deuxième propriété page-item utilise des expressions JavaScript. Lorsque cette expression est vraie, la classe active est appliquée. Cela nous permet d'appliquer conditionnellement la classe active en fonction de la valeur de currentPage. Une autre façon d'appliquer conditionnellement la classe active consiste à se lier à un tableau. active

liaison à l'aide de la syntaxe du tableau

Vue permet d'appliquer des listes de classes CSS en liant un tableau. Si vous souhaitez utiliser la syntaxe du tableau, le HTML affiché à l'étape 1 deviendra:

<code class="language-javascript">{'page-item':true, 'active':(page === currentPage)}</code>

Version en cours d'exécution à l'aide de la syntaxe de la table. La seule différence est que les tableaux sont utilisés sur les liaisons de classe. Cette alternative nécessite la présence de deux autres propriétés dans l'objet Vue

. Ces deux propriétés sont: data et pageItemClass. Le code d'initialisation Vue mis à jour contenant ces propriétés est le suivant: activeClass

<code class="language-html"><div id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" :class="[pageItemClass, (page === currentPage) ? activeClass : '']">
        <a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div></code>

Comme vous pouvez le voir, la taille de l'objet

augmente, mais le code dans le modèle est légèrement plus concis lors de l'utilisation de la syntaxe du tableau. La syntaxe d'objet est plus compacte. Le choix entre la syntaxe des objets et la syntaxe du tableau dépend de la préférence personnelle. Ces deux méthodes semblent rendre les modèles HTML plus compliqués. Mais, il y a en fait plus ici. En fait, nous séparons l'objectif. Nous créons un modèle basé sur les données. Cela rend la vue plus facile à tester et plus facile à maintenir à mesure que l'application se développe. data

Résumé

J'espère que cet article vous sera utile. Si vous souhaitez en savoir plus sur Vue.js, vous pouvez consulter d'autres contenus Vue sur SitePoint.

(Ce qui suit est une création pseudo-originale de la partie FAQ dans le texte d'origine, en maintenant la signification originale mais réécrit l'expression)

FAQS sur l'application des classes CSS dans Vue.js Conditional

Comment utiliser les opérateurs ternaires pour la liaison de la classe conditionnelle?

Dans Vue.js, les opérateurs ternaires peuvent être utilisés pour la liaison de la classe conditionnelle. Il s'agit d'un moyen simple et efficace de basculer entre deux classes en fonction des conditions. Les exemples sont les suivants:

<div :class="condition ? 'classA' : 'classB'"></div>

Dans cet exemple, si la condition est vraie, classA est appliquée; si la condition est fausse, classB est appliquée. La condition peut être n'importe quelle expression JavaScript valide.

Comment lier conditionnellement plusieurs classes dans vue.js?

vue.js permet la liaison conditionnelle de plusieurs classes à l'aide de la syntaxe d'objet. Ceci est très utile lorsque plusieurs classes doivent être appliquées en fonction des différentes conditions. Les exemples sont les suivants:

<div :class="{ 'classA': conditionA, 'classB': conditionB }"></div>

Dans cet exemple, si conditionA est vrai, classA est appliqué; si conditionB est vrai, classB est appliqué. conditionA et conditionB peuvent être n'importe quelle expression JavaScript valide.

Pouvez-vous utiliser des attributs calculés pour la liaison de la classe conditionnelle dans vue.js?

Oui, la liaison de la classe conditionnelle peut être utilisée dans Vue.js. Les propriétés informatiques sont utiles lorsque la détermination de la logique d'une classe est complexe. Les exemples sont les suivants:

<div :class="computedClass"></div>

Dans l'instance Vue, définissez computedClass comme une propriété calculée:

<code class="language-html"><div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div></code>

Dans cet exemple, l'attribut computedClass calculé renverra le nom de classe en fonction de la logique complexe définie.

Comment combiner des classes statiques et liées dans vue.js?

Dans Vue.js, les classes statiques et les classes de liaison peuvent être combinées. Ceci est très utile lorsque vous devez toujours appliquer une certaine classe, mais vous devez également appliquer d'autres classes conditionnellement. Les exemples sont les suivants:

<div :class="['staticClass', { 'classA': conditionA, 'classB': conditionB }]"></div>

Dans cet exemple, staticClass sera toujours appliqué, et classA et classB seront appliqués respectivement selon conditionA et conditionB.

Comment lier conditionnellement les styles en ligne dans vue.js?

vue.js permet la liaison conditionnelle des styles en ligne à l'aide de la syntaxe d'objet. Ceci est utile lorsque certains styles doivent être appliqués en fonction des conditions. Les exemples sont les suivants:

<div :style="{ color: conditionA ? 'red' : 'blue', fontSize: conditionB ? '12px' : '16px' }"></div>

Dans cet exemple, si conditionA est vrai, la couleur est rouge, et si conditionA est faux, la couleur est bleue. De même, si conditionB est vrai, la taille de la police est 12px; si conditionB est faux, la taille de la police est 16px.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!