Vue 3 - 将多个类绑定到一个条件上

Question

从文档中可以看出，我们可以像这样将类绑定到条件上：

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

如果我想要将两个类绑定到同一个条件，这样可以吗？有没有更简单的方法？

<div
  class="static"
  :class="{ active: isActive,  active: isSelectable }"
></div>

- Adam Starrh

---

:class="{ active: isActive || isSelectable }"，如果复杂度增加太多，您也可以将其分离为辅助方法。 - TheHiggsBroson

Answer 1

如果我理解你的意思正确，你想将多个类绑定到同一个条件上。如果你想要这样做，那么没有什么会阻止你这样做。

<div
  class="static"
  :class="{ 'class-1 class-2': condition }"
></div>

- Husam Ibrahim

---

如果我想将类名与变量名连接起来怎么办？就像这样 :class="{ fa-${item.icon}: 2 == 2 }" - Mohammad Ayoub Khan

@MohammadAyoubKhan 然后您可以使用动态属性语法，如下所示 - :class="{ [`fa-${item.icon}`] : 2 == 2 }" 三元运算符在 [ ] 声明中同样很好用。 - Ciabaros

Answer 2

您可以使用||和&&组合条件：

   <div
      class="static"
      :class="{ active: isActive || isSelectable }"
    ></div>

- catmal