Vue中如何在v-for循环内部插入自定义元素？

API 探路者

2026-9-30

解决方案

有两种常用实现方式，优先推荐第一种，索引逻辑完全统一不需要额外处理：

方法1：构造合并后的渲染数组（最推荐）

在计算属性中把原始轮播项数组和你要插入的额外项合并，循环时直接使用合并后的数组，额外项会天然被纳入索引统计逻辑：

先添加计算属性：

computed: {
  renderSlides() {
    const list = [...this.slides]
    // 满足长度为5的条件时，插入额外项
    if (list.length === 5) {
      // 插在列表末尾用push，要插在指定位置用splice(插入下标, 0, 额外项配置)
      list.push({
        nodeName: 'foobar',
        isExtra: true // 标记为额外项，方便单独加类名、处理逻辑
      })
    }
    return list
  }
}

修改模板循环逻辑：

<li 
  v-for="(slide, index) in renderSlides" 
  :key="index"
  :class="[
    slideIndex === index ? 'active' : '',
    slide.isExtra ? 'cursor-pointer item' : ''
  ]"
  @click="slideIndex = index"
>
  {{ slide.nodeName }}
</li>

方法2：template标签包裹循环（适合不想修改JS的简单场景）

如果不想修改JS逻辑，可以用<template>占位标签（不会生成真实DOM）包裹循环内容，在循环内部判断位置插入额外元素：

<template v-for="(slide, index) in slides">
  <li 
    :key="`item-${index}`"
    :class="slideIndex === index ? 'active' : ''"
    @click="slideIndex = index"
  >
    {{ slide.nodeName }}
  </li>
  <!-- 要插在循环末尾的话，判断是最后一个元素且满足长度条件时插入 -->
  <li 
    v-if="index === slides.length - 1 && slides.length ===5"
    :key="`extra-${index}`"
    class="cursor-pointer item"
    @click="slideIndex = index + 1"
  >
    foobar
  </li>
</template>

注意：该方法需要手动给额外项的索引做+1处理，逻辑耦合度更高，仅适合临时快速实现的场景。