VueJS中使用v-for为循环元素添加唯一ID的实现方法

方法1：使用数据项自身的唯一标识（推荐） #

如果你的producthots数组中每个item都带有唯一字段（比如id、slug、uniqueCode等），直接基于这个字段生成ID是最稳妥的方式，同时建议把v-for的:key也换成这个唯一字段（比用index更符合Vue的性能优化规范）。

修改后的代码示例：

<div v-for="(item, index) in producthots" :key="item.id">
  <div
    :class="index % 2 === 0 ? 'product-item row-reverse' : 'product-item'"
    :id="`item-${item.id}`"
  >
    <!-- 元素内容 -->
  </div>
</div>

如果需要生成类似item-first这种语义化ID，可利用item的文本字段（比如title），同时处理成符合HTML ID规范的格式：

:id="`item-${item.title.toLowerCase().replace(/\s+/g, '-')}`"

方法2：使用循环索引（适合无唯一字段的场景） #

如果数据中没有天然的唯一标识，可以结合循环的index和固定前缀生成ID，缺点是当数据顺序变化时，ID会跟着变化，仅适合静态排序的列表。

代码示例：

<div v-for="(item, index) in producthots" :key="index">
  <div
    :class="index % 2 === 0 ? 'product-item row-reverse' : 'product-item'"
    :id="`item-${index}`"
  >
    <!-- 元素内容 -->
  </div>
</div>

这样会生成item-0、item-1、item-2这类按顺序排列的唯一ID。

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