Vue实现点击按钮加载更多：显示v-for循环后续10个元素

步骤1：添加控制显示数量的状态变量 #

在组件的data中新增变量，用来动态控制显示条数和判断是否还有更多内容：

data() {
  return {
    displayLimit: 11, // 初始显示前11个元素（对应原代码的i<=10逻辑）
    hasMore: true,    // 标记是否还有更多元素可加载
    loading: false    // 保留你原有的加载状态变量
  }
}

步骤2：修改模板的显示条件 #

把原代码中固定的v-show="i <= 10"替换为动态变量，让显示数量可通过点击按钮调整：

<template v-for="(category, i) in allCategories">
  <v-col :key="i" v-show="i < displayLimit" class="col-6 col-sm-4">
    <v-checkbox
      dense
      color="black"
      :label="category.title"
      :value="isCategoryChecked(category.id)"
      @click="() => selectCategory(category.id)"
    />
  </v-col>
</template>

步骤3：完善加载更多按钮的显示逻辑 #

给按钮添加v-show指令，当所有元素都显示完成后自动隐藏按钮：

<v-btn 
  color="black white--text"
  @click="showMoreCategories"
  :loading="loading"
  v-show="hasMore"
>
  {{ $t('general.loadMore') }}
</v-btn>

步骤4：实现加载更多函数 #

在showMoreCategories中更新显示条数，并判断是否还有剩余元素：

showMoreCategories() {
  // 模拟加载状态（纯前端分页可省略setTimeout，直接执行核心逻辑）
  this.loading = true;
  
  setTimeout(() => {
    // 每次加载10个新元素
    this.displayLimit += 10;
    
    // 检查是否已显示完所有分类
    if (this.displayLimit >= this.allCategories.length) {
      this.hasMore = false;
    }
    
    this.loading = false;
  }, 500);
}

可选：适配异步数据场景 #

如果allCategories是异步获取的，可通过watch或mounted初始化hasMore状态，确保数据加载后能正确判断：

watch: {
  allCategories(newList) {
    this.hasMore = newList.length > this.displayLimit;
  }
},
mounted() {
  this.hasMore = this.allCategories.length > this.displayLimit;
}

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