当前位置：首页 > VUE

vue实现ul隔行变色

2026-02-23 16:07:53VUE

实现方法

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

使用CSS伪类选择器

通过CSS的:nth-child伪类选择器直接为偶数行或奇数行设置背景色。这种方式无需Vue参与，纯CSS即可实现。

ul li:nth-child(even) {
  background-color: #f2f2f2;
}
ul li:nth-child(odd) {
  background-color: #ffffff;
}

使用Vue动态绑定class

在Vue中，可以通过v-for循环生成列表项，并结合索引动态绑定class或style。

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    }
  }
}
</script>

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

使用Vue动态绑定style

直接通过v-bind:style动态设置行背景色。

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

使用计算属性

如果需要更复杂的逻辑，可以通过计算属性生成带有行样式的列表数据。

vue实现ul隔行变色

<template>
  <ul>
    <li 
      v-for="item in styledItems" 
      :key="item.id" 
      :style="{ backgroundColor: item.bgColor }"
    >
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    }
  },
  computed: {
    styledItems() {
      return this.items.map((item, index) => ({
        id: index,
        text: item,
        bgColor: index % 2 === 0 ? '#ffffff' : '#f2f2f2'
      }))
    }
  }
}
</script>