如何不显示 v-for 中的所有项目

问题描述

我有一个这样的列表：

data:{
        slides:[
            { slideImg: "images/necklace.webp"},{ slideImg: "images/necklace2.webp"},{ slideImg: "images/pants.webp"},{ slideImg: "images/pants2.jpeg"},],}

我尝试使用 v-for：

<div class="slide" v-for="slide in slides">
   <img :src="slide.slideImg">       
</div>

V-for 显示所有项目。但是我有一个选项列表，例如：当我单击选项“每页 1”时，将显示 1 张幻灯片，“每页 2”然后将显示 2 张幻灯片，然后是 3、4、5……有人可以给我看怎么做？

解决方法

最佳做法是创建一个计算值来过滤您想要显示的项目。

computed: {
  itemsToShow() {
    return this.items.slice(0,this.itemsToShowCount);
  }
}

然后在这个计算项上使用 v-for。