当前位置：首页 > VUE

vue实现奇偶列表

2026-02-16 23:50:07VUE

实现奇偶列表的方法

在Vue中实现奇偶列表可以通过多种方式完成，以下是几种常见的实现方法：

使用v-for和索引判断

在模板中使用v-for遍历数组，并通过索引判断奇偶性，动态添加不同的样式或类名。

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

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

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

使用计算属性分离奇偶项

通过计算属性将列表分为奇数项和偶数项，然后在模板中分别渲染。

<template>
  <div>
    <h3>偶数项</h3>
    <ul>
      <li v-for="(item, index) in evenItems" :key="index">
        {{ item }}
      </li>
    </ul>
    <h3>奇数项</h3>
    <ul>
      <li v-for="(item, index) in oddItems" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    }
  },
  computed: {
    evenItems() {
      return this.list.filter((_, index) => index % 2 === 0)
    },
    oddItems() {
      return this.list.filter((_, index) => index % 2 !== 0)
    }
  }
}
</script>

使用CSS选择器

直接利用CSS的:nth-child选择器实现奇偶样式差异，无需额外的JavaScript逻辑。

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      {{ item }}
    </li>
  </ul>
</template>

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

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