VueJS中如何根据返回数据的偶数索引为接口元素添加Row-reverse类

在VueJS中可以通过v-for循环结合:class（v-bind:class的简写）的条件判断来实现需求，具体实现如下：

核心逻辑 #

用v-for遍历接口返回的数据时，会自动获取当前项的索引（从0开始计数），通过判断索引是否为偶数，动态为对应元素添加Row-reverse类。

完整代码示例 #

<template>
  <div class="api-container">
    <!-- 遍历接口数据，同时获取当前项的索引 -->
    <div 
      v-for="(item, index) in apiData" 
      :key="item.id" <!-- 必须绑定唯一key值以优化渲染 -->
      :class="{ 'Row-reverse': index % 2 === 0 }" <!-- 条件触发类名添加 -->
      class="api-item"
    >
      <!-- 替换为你实际要展示的接口数据内容 -->
      <div class="item-title">{{ item.title }}</div>
      <div class="item-content">{{ item.content }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiData: [] // 存储接口返回的数据集
    }
  },
  async mounted() {
    // 替换为你的实际接口请求逻辑
    try {
      const response = await fetch('your-api-address')
      this.apiData = await response.json()
    } catch (error) {
      console.error('接口请求失败:', error)
    }
  }
}
</script>

<style scoped>
.api-item {
  /* 元素基础样式 */
  display: flex;
  padding: 16px;
  margin: 8px 0;
  border: 1px solid #e0e0e0;
}

.Row-reverse {
  /* Row-reverse类的样式，示例为flex布局反向排列 */
  flex-direction: row-reverse;
}
</style>

补充说明 #

• 这里用了:class的对象语法，当index % 2 === 0为true时，Row-reverse类会被自动添加
• 也可以用数组语法实现相同效果：:class="[index % 2 === 0 ? 'Row-reverse' : '']"
• 若需求是从1开始判断偶数，只需把条件改为(index + 1) % 2 === 0即可

内容的提问来源于stack exchange，提问作者BinChanhKun