如何为集合内每个对象动态绑定背景颜色，实现行交替黑白效果

直接通过动态绑定class结合循环的index就能实现你要的效果，修改后的代码如下：

<template>
  <div
    v-for="(activity, index) in logActivities"
    :key="index"
    :class="['row', index % 2 === 0 ? 'bg-black' : 'bg-white']"
  >
    <div class="col-6 padding-10">{{ activity.activity }}</div>
    <div class="col-6 padding-10">
      {{ toGetRelativeTime(activity.createdAt) }}
    </div>
  </div>
</template>

逻辑说明 #

• v-for的index从0开始计数，第1行对应index=0（偶数），绑定bg-black类；第2行对应index=1（奇数），绑定bg-white类
• 依靠index % 2 === 0的判断，就能让行背景色按黑、白、黑、白的规律循环交替

内容的提问来源于stack exchange，提问作者jibzy