Comment utiliser deux instructions conditionnelles dans VueJS

Question

Je crée une barre latérale avec beaucoup de fonctionnalités, je dois donc ajouter deux conditions à ma :class mais je ne sais pas comment faire. Voici ce que j'ai fait :

:class=" showSidebar ? 'open' : 'closed', showSidebarMini ? 'openmini' : 'closedmini'"

Answer 1

Vous pouvez utiliser des styles d'objet pour effectuer les opérations suivantes :

Exemple :

{
  'open': showSidebar,
  'closed': !showSidebar,
  'openmini': showSidebarMini,
  'closedmini': !showSidebarMini
}

Dans votre cas :

:class="{ 'open': showSidebar, 'closed': !showSidebar, 'openmini': showSidebarMini, 'closedmini': !showSidebarMini }"

Answer 2

Vous pouvez utiliser un tableau :

:class="[(showSidebar ? 'open' : 'closed'), (showSidebarMini ? 'openmini' : 'closedmini')]"