如何在 for 循环中的 x-bind alpine.js 中添加条件？

Question

我想要在 alpine.js 中的循环的偶数和奇数索引上进行一些类绑定

<template x-for="(item, index) in myForData" :key="index">
      <div class="bg-primary-500 text-white border-gray-900 rounded-lg block w-64 h-24 text-lg shadow hover:shadow-lg hover:rounded transition duration-150 ease-in-out transform hover:scale-105 p-3" 
      :class="{ 'bg-green-500':  index % 2 == 0 }"
        </div>
</template>

我尝试使用模数。 也许你们中的一些人有更好的主意？

Answer 1

您可能想要对背景值进行真正的切换：

<template x-for="(item, index) in myForData" :key="index">
      <div class=" text-white border-gray-900 rounded-lg block w-64 h-24 text-lg shadow hover:shadow-lg hover:rounded transition duration-150 ease-in-out transform hover:scale-105 p-3" 
      :class="{ 'bg-primary-500': index % 2 === 1, 'bg-green-500':  index % 2 == 0 }"
        </div>
</template>