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

【问题标题】：How to add a condition in x-bind alpine.js in foor loop?如何在 for 循环中的 x-bind alpine.js 中添加条件？
【发布时间】：2021-02-18 22:32:25
【问题描述】：

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

<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>

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

【问题讨论】：

可以分享一下bg-green-500和bg-primary-500的css吗？

标签： javascript html alpine.js

【解决方案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>

【讨论】：

如果解决了，您介意投票/接受答案吗？