Cara menggunakan dua pernyataan bersyarat dalam VueJS

Question

Saya sedang mencipta bar sisi dengan banyak fungsi jadi saya perlu menambah dua syarat pada :class saya tetapi saya tidak tahu cara melakukannya. Inilah yang saya lakukan:

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

Answer 1

Anda boleh menggunakan gaya objek untuk melakukan perkara berikut:

Contoh:

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

Dalam kes anda:

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

Answer 2

Anda boleh menggunakan tatasusunan seperti:

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