So verwenden Sie zwei bedingte Anweisungen in VueJS

Question

Ich erstelle eine Seitenleiste mit vielen Funktionen, daher muss ich meiner :class zwei Bedingungen hinzufügen, weiß aber nicht, wie ich das machen soll. Das habe ich gemacht:

: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')]"