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

Question

我有一个这样的列表：

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... 有人可以告诉我吗怎么做？

标签： listvue.jsoptionv-for

Answer 1

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

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

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