VueJS中如何获取索引实现行背景色交替显示？

你的问题出在错误地使用数组元素对象进行取余运算：
在:class绑定中，order是allOrders数组里的单个对象，直接对对象执行% 2运算会得到NaN，而NaN === 0始终为false，所以所有行都只会应用bg-light-grey类。

修复步骤 #

1. 在v-for循环中添加索引参数，获取当前行的位置序号
2. 使用索引值替代对象进行奇偶判断

修改后的代码如下：

<div
  class="
  row
  margin-top-4 margin-botton-4 margin-top-md-10 margin-bottom-10
"
  :class="index % 2 === 0 ? 'bg-white' : 'bg-light-grey'"
  @click="navigateToOrderDetails(order)"
  v-for="(order, index) in allOrders"
  :key="order._id"
>
   {{ order.description }}
</div>

说明：

• v-for="(order, index) in allOrders" 中的index是从0开始的序号，第一行对应index=0（偶数，应用白色背景），第二行对应index=1（奇数，应用灰色背景），完全符合你的需求。

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