vue 循环1000条数据，每隔1秒展示100条

在Vue.js中，如果你需要循环渲染大量数据并实现分批显示，你可以结合`v-for`指令、`setTimeout`函数以及条件渲染（如`v-if`或`v-show`）来实现这个效果。这里是一个简单的示例：

<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in displayedItems" :key="index">
        {{ item }}
        <!-- 这里可以加上一个计数器，当达到100时清空并重新开始计数 -->
        <span v-if="index % 100 === 99">...</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: Array.from({ length: 1000 }, (_, i) => i + 1), // 假设这是你的1000条数据
      displayedItems: [], // 初始只显示一部分
      counter: 0, // 计数器用于控制显示条目
      intervalId: null, // 存储定时器ID
    };
  },
  mounted() {
    this.showNextBatch();
  },
  methods: {
    showNextBatch() {
      if (this.counter >= this.allData.length) {
        // 如果已经显示完所有数据，则停止分批显示
        clearInterval(this.intervalId);
        return;
      }

      this.displayedItems = this.allData.slice(0, 100); // 取出下一批100条数据
      this.counter += 100;

      // 每隔1秒展示新一批数据
      this.intervalId = setTimeout(() => this.showNextBatch(), 1000);
    },
  },
};
</script>

在这个例子中，我们在组件挂载时启动一个定时器`showNextBatch`，每次调用该方法都会显示新的100条数据，并更新计数器。每100条数据后，会添加一个过渡元素`...</span>`。如果所有数据都显示完了，就会清除定时器结束分批处理。