Commentaires
Avec Vue.JS, on peut gérer les attributs style et class rapidement et simplement.

Gérer les styles conditionnels avec la syntaxe objet


Gérer les styles avec Vue.JS est très utile dans le cas d'un style conditionnel. Imagine que nous voulons appliquer une classe uniquement si une condition est respectée. Dans le cas de notre projet, uniquement si l'article est sélectionné. Hé bien, on a une façon simple de le faire comme ça :

{"language":"text/html","content":"<button :class=\"{classeSiVraie: condition, classe2SiVrai: condition2]\"></button>","filename":""}

Il faut savoir qu'on peut utiliser v-bind:class="" et class="" sur un même élément de sorte de garder les classes qui ne changent pas dans class="".
Voici un exemple concret :

{"language":"text/html","content":"<div\n class=\"bg-blue-300\"\n :class=\"{ active: isActive, 'text-danger': hasError }\"\n></div>","filename":""}

{"language":"text/javascript","content":"data() {\n return {\n isActive: true,\n hasError: false\n }\n}","filename":""}

Dans l'exemple ci-dessus, on applique la classe 'active' si isActive vaut true, et la classe 'text-danger' si hasError vaut true. Dans tous les cas, on appliquera la classe 'bg-blue-300'

Arthur, l'apprenti développeurTrès pratique !
C'est tout à fait vrai ! Mais la technique montrée dans l'exemple ci-dessus peut vite se révéler verbeuse dans le cas où on a plusieurs classes à appliquer pour une seule et même condition...
Dans notre cas, on voudrait changer la couleur du texte, du fond et du hover du bouton pour ajouter/enlever notre post de la sélection. Pour arriver à nos fins, voici ce que nous devons faire :

{"language":"text/html","content":"<button \n@click=\"toggleSelection(post, $event.target)\" \nclass=\"text-sm absolute bottom-2 px-2 rounded\"\n:class=\"{'text-green-700 bg-green-200 hover:bg-green-300':!selection.includes(post), 'text-yellow-700 bg-yellow-100 hover:bg-yellow-200':selection.includes(post)}\"\n>\n Ajouter à ma liste\n</button>","filename":"index.html"}

Arthur, l'apprenti développeurCa fait long en effet !
Exactement. C'est pour ça que nous allons voir la deuxième syntaxe, la syntaxe tableau !

Gérer les styles conditionnels avec la syntaxe tableau


Cette syntaxe utilise des tableaux à la place des objets.
{"language":"text/html","content":"<button :class=\"[class1, class2, class3, ...]\"></button>\n...\n<script>\n {\n data() {\n return {\n class1: 'text-green',\n class2: 'bg-blue border-red',\n class3: ['hover:bg-red', 'hover:border-green']\n\t\t\t\t...\n\t\t\t}\n }\n }\n</script>","filename":"index.html"}

Et pour faire des conditions, il y a une méthode qui utilise les ternaires que j'apprécie tout particulièrement :

{"language":"text/html","content":"<button :class=\"[condition ? class1 : class2, condition2 ? class3 : '']\"></button>","filename":""}

Du coup, si tu as compris, tu devrais avoir trouvé comment faire avec notre bouton :

{"language":"text/html","content":"<button @click=\"toggleSelection(post, $event.target)\" class=\"text-sm absolute bottom-2 px-2 rounded\"\n :class=\"[selection.includes(post) ? 'text-yellow-700 bg-yellow-100 hover:bg-yellow-200' : 'text-green-700 bg-green-200 hover:bg-green-300']\">\n Ajouter à ma liste\n</button>","filename":"index.html"}

Arthur, l'apprenti développeurJe ne trouve pas ça particulièrement plus court...
Tu as raison, je n'ai pas tout montré. L'intérêt de cette syntaxe tableau est qu'elle autorise l'utilisation de nos données. On peut donc stocker nos classes dans différentes données et les appeler ensuite dans le tableau ! Voici un exemple pour te montrer :

{"language":"text/html","content":"<button @click=\"toggleSelection(post, $event.target)\" class=\"text-sm absolute bottom-2 px-2 rounded\"\n :class=\"[selection.includes(post) ? cssButtonRemove : cssButtonAdd]\">\n Ajouter à ma liste\n</button>\n<script type=\"module\">\n import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'\n createApp({\n data() {\n return {\n loading: true,\n posts: [],\n selection: [],\n cssButtonAdd: 'text-green-700 bg-green-200 hover:bg-green-300',\n cssButtonRemove: ['text-yellow-700', 'bg-yellow-100', 'hover:bg-yellow-200'], // Les deux syntaxes pour te montrer\n modal: 'close',\n }\n }\n })\n</script>","filename":"index.html"}

Arthur, l'apprenti développeurC'est pratique tout ça, vraiment !
Ravi de voir que tu comprends toute la puissance de l'outil. Je suis un peu tatillon ; j'aime bien regrouper mon CSS dans un seul objet dans mes données. Je modifie donc très légèrement mon code :

{"language":"text/html","content":"<button @click=\"toggleSelection(post, $event.target)\" class=\"text-sm absolute bottom-2 px-2 rounded\"\n :class=\"[selection.includes(post) ? css.ButtonRemove : css.ButtonAdd]\">\n Ajouter à ma liste\n</button>\n<script type=\"module\">\n import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'\n createApp({\n data() {\n return {\n loading: true,\n posts: [],\n selection: [],\n css: {\n ButtonAdd: 'text-green-700 bg-green-200 hover:bg-green-300',\n ButtonRemove: ['text-yellow-700 bg-yellow-100 hover:bg-yellow-200'],\n },\n modal: 'close',\n }\n }\n })\n</script>","filename":"index.html"}

Nous verrons dans une partie suivante du cours une troisième façon de gérer le style conditionnel...

Gérer le style inline


On a vu comment gérer les classes avec Vue.JS. Il est également possible de gérer le style en ligne de la même manière, en v-bindant l'attribut style :

{"language":"text/html","content":"<article :style=\"styleObject\"></article>","filename":""}

Et côté data on aura :

{"language":"text/javascript","content":"data() {\n return {\n styleObject: {\n color: 'green',\n fontSize: '12px',\n\t border: '1px solid black,\n }\n }\n}","filename":""}

Bon, je te propose de continuer notre projet en parlant maintenant des transitions avec Vue.JS. Ca va permettre à notre modale des articles à lire plus tard d'apparaitre de manière un peu moins brutale.

Arthur, l'apprenti développeurÇa me va !

J'ai terminé cette partie
Demander de l'assistance