如何在VueJS中使用两个条件语句

Question

我正在创建一个具有很多功能的侧边栏，因此我需要在我的:class中添加两个条件，但我不知道如何执行此操作。这就是我所做的：:class="showSidebar?'open':'closed',showSidebarMini?'openmini':'closedmini'"

P粉441076405 · Answer

您可以使用对象样式执行以下操作：

示例：

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

就您而言：

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

P粉333395496 · Answer

您可以使用类数组：

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