Vue.js 2中如何实现v-for列表项按3秒间隔逐个显示？

嘿，我来帮你搞定这个需求！要实现每3秒逐个显示车辆信息的效果，咱们可以通过控制渲染的数据源来实现，具体步骤和代码如下：

1. 组件数据与定时器准备 #

首先在你的Vue组件的data选项里，新增两个变量：

• displayedCars：用来存放当前要显示的车辆数据，初始为空数组
• timer：用来存储定时器实例，方便后续销毁组件时清除定时器，避免内存泄漏

data() {
  return {
    cars: [], // 你的原始车辆数据数组，假设已经通过接口或其他方式获取到了
    displayedCars: [],
    timer: null
  }
}

2. 编写逐行显示的方法 #

新增一个方法showNextCar，用来每次从原始cars数组里取一个元素，添加到displayedCars中；当所有车辆都显示完后，自动清除定时器。

methods: {
  showNextCar() {
    // 如果还有未显示的车辆
    if (this.displayedCars.length < this.cars.length) {
      // 取当前显示数组长度对应的下一个车辆
      const nextCar = this.cars[this.displayedCars.length];
      this.displayedCars.push(nextCar);
    } else {
      // 所有车辆都显示完了，清除定时器
      clearInterval(this.timer);
      this.timer = null;
    }
  }
}

3. 启动定时器 #

在组件的mounted钩子中，启动定时器，每3秒调用一次showNextCar方法：

mounted() {
  // 每3秒执行一次showNextCar
  this.timer = setInterval(() => {
    this.showNextCar();
  }, 3000);
}

4. 清理定时器（重要） #

为了避免组件销毁后定时器还在运行导致内存泄漏，一定要在beforeDestroy钩子中清除定时器：

beforeDestroy() {
  if (this.timer) {
    clearInterval(this.timer);
    this.timer = null;
  }
}

5. 修改模板代码 #

把你原来模板里的v-for循环数据源从cars改成displayedCars，这样就只会渲染已经添加到显示数组里的车辆：

<tbody>
  <tr v-for="(car, index) in displayedCars" :key="car.id || index">
    <td><img :src="car.photo" width="40px" height="40px" alt="车辆图片"></td>
    <td><router-link :to="{path:'/car/' + car.id}" >{{ car.name }}</router-link></td>
    <td>{{ car.make }}</td>
    <td></td>
    <td>{{ car.created }}</td>
  </tr>
</tbody>

小贴士：别忘了给v-for加上:key，这是Vue的性能优化要求，优先用car.id这种唯一标识，没有的话再用index。

这样一来，页面加载后就会每3秒自动显示一行新的车辆信息，直到所有车辆都展示完毕~

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