如何在 :class VueJS 中放入两个条件

Question

我正在创建一个具有很多功能的侧边栏，所以我需要在我的 :class 中添加两个条件，但我不知道该怎么做。我就是这样做的：

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

Answer 1

你可以在对象样式中做：

示例：

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

你的情况：

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

Answer 2

您可以使用类:

的数组

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

Answer 3

当你在 class

中有条件时，你必须使用对象语法

v-bind:class="{'open' : showSidebar , 'openmini' : showSidebarMini}"

并在需要切换 class

时在 class 中使用数组

v-bind:class="[showSidebar ? 'open' : 'closed', showSidebarMini ? 'openmini' : 'closedmini']"

How to put two conditionals in :class VueJS