VUE v-for 只输出指定数量的数据（比如有5条数据只输出1条）

有的时候我们可能遇到后端返回的数据列表条数与实际要显示的条数不同的情况，如果每次都找后端修改，可能比较麻烦。

其实我们可以 slice 方法提取数组中指定的部分来达到目的，本文就分享一下 vue 中 v-for 循环只输出指定数量数据的方法。

比如后端 api 中默认返回了 10 条数据，但是我们只想显示其中的 3 条：

<div v-for="item in items.slice(0, 3)">
  {{ item }}
</div>

上述代码中，items.slice(0, 3)表示获取数组 items 的前 3 个元素，然后使用 v-for 指令循环遍历输出。

同样的，如果需要输出后 3 个元素，可以将 slice 方法的参数改为-3，例如：

<div v-for="item in items.slice(-3)">
  {{ item }}
</div>