Блог

Главная - Вопросы по программированию - Как добавить условие в x-bind alpine.js в цикле for?

Как добавить условие в x-bind alpine.js в цикле for?

#javascript #html #alpine.js

#javascript #HTML #alpine.js

Вопрос:

Мне нужны некоторые привязки классов к четному и нечетному индексу цикла for в 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>

Я пытался работать с модулем. Может быть, у кого-то из вас есть идея получше?

Комментарии:

1. Можете ли вы поделиться css bg-green-500 и bg-primary-500?

Ответ №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>

Комментарии:

1. Если это решило проблему, вы не возражаете против голосования / принятия ответа?