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