AlpineJS中的多个类绑定？答案

【问题标题】：Multiple class bindings in AlpineJS?AlpineJS中的多个类绑定？
【发布时间】：2021-03-08 18:49:32
【问题描述】：

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

条件：

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

属性：

:class="arrayItem.class"

两者分开工作。我尝试将它们添加为单独的属性，但只应用第一个属性。我也试过这个（无济于事）：

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

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

【问题讨论】：

【解决方案1】：

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

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

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


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

【讨论】：