VUE2 网站 产品实现奇偶排序样式

在后端返回的数据里面,遇到需要数据奇数 偶数时错开来 , 布局,需判断

<template>
  <div>
    <div v-for="(item, index) in backendArray" :key="index" :class="getItemClass(index)">
      <div v-if="isOddIndex(index)" class="left-item">
        <!-- 左边排布的元素 -->
        {{ item }}
      </div>
      <div v-else class="right-item">
        <!-- 右边排布的元素 -->
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      backendArray: [], // 后端返回的数组
    };
  },
  methods: {
    isOddIndex(index) {
      // 判断下标是否为奇数
      return index % 2 !== 0;
    },
    getItemClass(index) {
      // 根据下标是否为奇数返回不同的样式类名
      return this.isOddIndex(index) ? 'odd-style' : 'even-style';
    },
  },
};
</script>

<style>
.odd-style {
  /* 样式：奇数下标元素的样式 */
}

.even-style {
  /* 样式：偶数下标元素的样式 */
}

.left-item {
  /* 样式：左边排布的元素的样式 */
}

.right-item {
  /* 样式：右边排布的元素的样式 */
}
</style>