AlpineJS 中的多个类绑定？

Question

我正在尝试将两个:class绑定附加到循环中的单个元素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

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

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

并且arrayItem.class将是无条件申请的第二类。

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