小编egg*_*gy1的帖子

我试图迭代一个循环，并向 4 个项目以上的每个元素添加一个条件类，以使用 tailwindcss 实现一些响应式样式。

以前我在其他类中添加了循环，效果很好：

<template x-for="(card, index ) in cards" :key="index">
    <div class="w-40 h-64"
         x-modal="card"
         :class="card.someOtherClass"
    >
        <div class="card-content" :id="'card-' + card.id">
        </div>
    </div>
</template>

但随后我需要添加一个条件语句来检查项目数量是否超过 4。我查看了之前提出的以下问题：

AlpineJS：如何有条件地将类添加到元素？

这建议使用{ 'class-name': statement }，所以我做了以下操作：

<template x-for="(card, index ) in cards" :key="index">
    <div class="w-40 h-64"
         x-modal="card"
         :class="[card.someOtherClass,
             {'bg-green-500':  index > 3 },
          ]"
        >
        <div class="card-content" :id="'card-' + card.id">
        </div>
    </div>
</template>

但我将其<div class="w-40 h-64 some-other-class [object Object]">传递给浏览器中的相关 HTML。如何从该对象获取相关值？