如何在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')]"