如何根据loop循环内元素序号动态设置classname为slider-n格式

核心实现逻辑：所有循环语法都自带内置的循环索引参数，直接使用该索引加1即可生成slider-n格式的类名，无需依赖产品本身的ID属性，适配产品动态变动的场景。

不同技术栈实现示例 #

• Vue 框架 v-for 循环实现

<template>
  <div class="slider">
    <div 
      v-for="(product, idx) in productList" 
      :key="product.id"
      :class="`slider-${idx + 1}`"
    >
      <!-- 产品内容渲染 -->
    </div>
  </div>
</template>

• React 框架 map 循环实现

const Slider = ({ productList }) => {
  return (
    <div className="slider">
      {productList.map((product, idx) => (
        <div
          key={product.id}
          className={`slider-${idx + 1}`}
        >
          {/* 产品内容渲染 */}
        </div>
      ))}
    </div>
  )
}

• 原生 JavaScript 实现

const sliderWrap = document.querySelector('.slider')
// 动态产品数组
const productList = [/* 你的产品数据 */]

productList.forEach((product, idx) => {
  const item = document.createElement('div')
  item.className = `slider-${idx + 1}`
  // 产品内容填充逻辑
  sliderWrap.appendChild(item)
})

• Liquid 模板（Shopify等场景）实现

<div class="slider">
  {% for product in collection.products %}
    <div class="slider-{{ forloop.index }}">
      <!-- 产品内容渲染 -->
    </div>
  {% endfor %}
</div>

该方案不受产品增删、排序、替换的影响，生成的类名永远和当前列表的渲染顺序保持一致。

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