javascript - AlpineJS 中的多个类绑定(bind)？

Question

我试图将两个 :class 绑定(bind)附加到 x-for 循环中的单个元素。通常这可以通过传入具有多个键值对的单个对象来实现。然而，在这种情况下，一个是条件，另一个是循环的属性:

条件:

:class="{'active': colours.includes(arrayItem.class)}"

属性:

:class="arrayItem.class"

两者都是分开工作的。我试过将它们添加为单独的属性，但只应用了第一个。我也试过这个(无济于事):

:class="{'active': colours.includes(arrayItem.class), arrayItem.class}"

我已经搜索过文档，但没有找到解决方案。

例子: https://jsfiddle.net/owjbu1ay/10/

Answer 1

绑定(bind)类属性时可以使用类数组。这里的问题是这里的对象语法 {}。您可以使用类数组并使用三元运算符有条件地呈现类，如下所示。

现在，如果 colours 数组包含 arrayItem.class，它将应用 active 类，

arrayItem.class 将是无条件应用的第二类。

:class="[colours.includes(arrayItem.class) ? 'active' : '' , arrayItem.class]"