vue实现奇偶列表

Vue 实现奇偶列表的方法

方法一：使用 v-for 和索引判断 在 Vue 模板中，可以利用 v-for 循环的索引值来判断奇偶行，并通过动态绑定 class 或 style 来设置不同的样式。

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

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

方法三：使用 CSS 伪类选择器 如果仅需要样式上的区分，可以直接利用 CSS 的 :nth-child 伪类选择器，无需在 Vue 中做额外处理。

<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>

方法四：使用第三方库（如 lodash） 如果需要更复杂的奇偶处理，可以借助 lodash 的 chunk 方法将列表分组。

<template>
  <ul>
    <li 
      v-for="(group, groupIndex) in groupedList" 
      :key="groupIndex"
      :class="{ 'odd-group': groupIndex % 2 === 0, 'even-group': groupIndex % 2 !== 0 }"
    >
      <span v-for="(item, itemIndex) in group" :key="itemIndex">
        {{ item }}
      </span>
    </li>
  </ul>
</template>

<script>
import _ from 'lodash';

export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    }
  },
  computed: {
    groupedList() {
      return _.chunk(this.list, 2);
    }
  }
}
</script>

以上方法可以根据实际需求选择使用，灵活应对不同的奇偶列表场景。