Vue.js中如何用v-for分块渲染数据：前6项与剩余项

这问题太常见啦！咱们可以借助JavaScript数组的slice()方法，轻松把你的17条数据拆成两部分，直接在模板里处理或者提前计算好都可以，两种方案给你参考：

方案一：直接在模板中使用slice() #

这种方式最直接，不用额外写计算属性，适合简单场景：

<template>
  <!-- 第一个区块：仅显示前6项 -->
  <div class="first-block">
    <div 
      v-for="(item, index) in section.slice(0, 6)" 
      :key="item.id || index"  <!-- 优先用item的唯一ID，没有就用index -->
    >
      <!-- 这里渲染你的item内容，比如 {{ item.title }} -->
      {{ item }}
    </div>
  </div>

  <!-- 第二个区块：显示剩下的所有项（17-6=11条） -->
  <div class="second-block">
    <div 
      v-for="(item, index) in section.slice(6)" 
      :key="item.id || index"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      section: [/* 你的17条数据对象 */]
    };
  }
};
</script>

解释下slice()的用法：

• slice(0, 6)：从数组第0位开始，取到第6位（不包含第6位），正好是前6条数据
• slice(6)：从数组第6位开始，一直取到最后，自动包含剩下的所有项

方案二：用计算属性提前拆分（推荐，性能更好） #

如果你的数据可能会动态变化，或者想让模板更简洁，建议用Vue的计算属性提前拆分数组，计算属性会自动缓存结果，避免每次渲染都重复调用slice()：

<template>
  <div class="first-block">
    <div 
      v-for="item in firstSixItems" 
      :key="item.id"
    >
      {{ item }}
    </div>
  </div>

  <div class="second-block">
    <div 
      v-for="item in remainingItems" 
      :key="item.id"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      section: [/* 你的17条数据对象 */]
    };
  },
  computed: {
    firstSixItems() {
      return this.section.slice(0, 6);
    },
    remainingItems() {
      return this.section.slice(6);
    }
  }
};
</script>

小提醒 #

绑定key的时候，尽量使用每条数据的唯一标识（比如item.id），而不是index，这样当数组顺序变化时，Vue能更高效地更新DOM，避免出现不必要的渲染问题。

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