vue实现隔行换色

实现隔行换色的方法

在Vue中实现表格或列表的隔行换色效果，可以通过以下几种方式实现：

方法一：使用CSS伪类选择器 通过CSS的:nth-child选择器直接为偶数或奇数行设置不同背景色，无需额外逻辑。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<style scoped>
li:nth-child(odd) {
  background-color: #f0f0f0;
}
li:nth-child(even) {
  background-color: #ffffff;
}
</style>

方法二：动态绑定class 根据索引动态计算class名称，适合需要更复杂条件判断的场景。

<template>
  <ul>
    <li 
      v-for="(item, index) in items" 
      :key="item.id"
      :class="{ 'even-row': index % 2 === 0, 'odd-row': index % 2 !== 0 }"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

<style scoped>
.even-row {
  background-color: #f0f0f0;
}
.odd-row {
  background-color: #ffffff;
}
</style>

方法三：动态绑定style 直接通过行内样式控制颜色，适合需要动态计算颜色的场景。

<template>
  <ul>
    <li 
      v-for="(item, index) in items" 
      :key="item.id"
      :style="{ backgroundColor: index % 2 === 0 ? '#f0f0f0' : '#ffffff' }"
    >
      {{ item.name }}
    </li>
  </ul>
</template>

注意事项

• 使用scoped样式时需注意选择器优先级
• 大数据量场景建议使用方法一（CSS选择器）性能更优
• 动态class/style方式便于与状态管理结合实现更复杂的交互效果