vuejs2如何获取以特定间隔显示的项目的v-for？

假设我有一组车，我想显示每一行…一次3秒。如何在Vuejs2中执行此操作

    <tbody>
      <tr v-for="(car) in cars">
        <td><img v-bind: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>

{{car.name}
{{car.make}
{{car.created}}

类似这样的东西

存储了当前在

currentCarIndex

中显示的内容

使用setInterval每3秒更改一次currentCarIndex

顺便说一句，所以我添加了一个

标记作为空包装器来执行

v-for

<template>
    <tbody>
        <template v-for="(car,i) in cars">
            <tr :key="i" v-if="i<=currentCarIndex">
                <td><img v-bind: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>
        </template>
    </tbody>
</template>
<script>
export default {
  data() {
    return {
      currentCarIndex: 0,
      cars: "..."
    };
  },
  mounted() {
    const interval = setInterval(() => {
      if (this.currentCarIndex + 1 < this.cars.length) this.currentCarIndex++;
      else clearInterval(interval);
    }, 3000);
  }
};
</script>

{{car.name}
{{car.make}
{{car.created}}
导出默认值{
数据（）{
返回{
currentCarIndex:0，
汽车：“…”
};
},
安装的（）{
常量间隔=设置间隔（（）=>{
如果（this.currentCarIndex+1

几个小时前，我正在开发的一个应用程序出现了这个问题。我有一个评论列表，我想让评论每隔一段时间显示一次，这样列表看起来就像是自上而下的“填充”，这样我就可以创建一个级联效果。大概是这样的：

<flashing-row v-for="(car, i) in cars" :show-in="i * 3000" :visible-for="2900">
 // Stuff inside my row here....
</flashing-row>

 Vue.component('flashing-row', {
    props: {
    showIn: {
      type: Number,
      required: true,
    },
    visibleFor: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      isVisible: false,
    };
  },
  created() {
    setTimeout(() => {
      // Make component visible
      this.isVisible = true;
      // Create timer to hide component after 'visibleFor' milliseconds
      setTimeout(() => this.isVisible = false, this.visibleFor);
    }, this.showIn);
  },
   template: '<tr v-if="isVisible"><slot></slot></tr>'
   });

文档指出您可以使用，但就我个人而言，我无法让它们为我工作，因此我创建了一个包装器组件，上面有一个

delay

属性，并且我输入了组件在渲染之前应该等待的时间。我在组件的模板中使用了一个简单的

v-if

您可以将

show in

和

visible for

道具添加到包装器组件中，如下所示：

<flashing-row v-for="(car, i) in cars" :show-in="i * 3000" :visible-for="2900">
 // Stuff inside my row here....
</flashing-row>

 Vue.component('flashing-row', {
    props: {
    showIn: {
      type: Number,
      required: true,
    },
    visibleFor: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      isVisible: false,
    };
  },
  created() {
    setTimeout(() => {
      // Make component visible
      this.isVisible = true;
      // Create timer to hide component after 'visibleFor' milliseconds
      setTimeout(() => this.isVisible = false, this.visibleFor);
    }, this.showIn);
  },
   template: '<tr v-if="isVisible"><slot></slot></tr>'
   });

您可以在中看到该代码的示例。这种方法特别好，因为：

• 如果你要在不止一个地方这样做，就不要重复你自己
• 使您的代码更易于维护，更易于浏览、阅读，从而在以后理解和修改
• 当然，你也可以使用道具，并根据需要进行扩展。可能性真的是无穷无尽

---

嗯，它们一个接一个地出现，只是有点相互重叠。有没有办法让它们一次显示一行，以便它们都显示在一个包含多行的表的末尾？@Jessi您是想一次添加一行吗？例如，先显示1行，3秒后显示2行，6秒后显示3行？如果是这样的话，只需将v-if改为

v-if=“哦，这与我想要的非常接近。（参见下面FrenchMajesty发布的“伟大”图片。）现在每一行显示在下一行之后，但出于某种原因，它只是在循环中运行。@Jessi，因为我误解了这个问题，并一直将索引重置为0。我已将答案更新为不将其重置为0。您显示的动画正是我想要的。我确实尝试了您创建的动画，但它只是在我的浏览器中爆炸：）@Jessi这可能是由于页面样式的问题导致的，还是控制台中出现了JavaScript错误？@Jessi还注意到，该代码与图像动画的作用不同，只是做了一些类似的事情。如果您确实希望行缓慢地依次出现，您只需从组件中删除
visible for
道具即可d关联的
setTimeout
。