vue settimeou v-for每隔三秒展示一个div

在Vue.js中，你可以使用`v-for`循环结合`setTimeout`或者`setInterval`函数来实现每间隔三秒动态渲染一个新的`<div>`元素。以下是一个基本示例：

<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }} <!-- 这里显示每个div的内容 -->
        <transition name="fade"> <!-- 使用过渡效果 -->
          <div v-if="showDivs[index]" @mouseenter="showDiv(index)" @mouseleave="hideDiv(index)">
            <!-- 每隔三秒展示隐藏这个div -->
            <button @click="startTimer(index)">Show</button>
          </div>
        </transition>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'], // 预设的数据
      showDivs: Array.from({ length: this.items.length }, () => false), // 初始时所有div都隐藏
      timer: null,
    };
  },
  methods: {
    startTimer(index) {
      if (this.timer) clearTimeout(this.timer); // 如果已有定时器则清除
      this.showDivs[index] = true; // 显示当前索引对应的div
      this.timer = setTimeout(() => {
        this.hideDiv(index);
        this.startTimer(index + 1); // 移动到下一个索引，如果没有更多索引则从第一个开始
      }, 3000); // 间隔3秒
    },
    hideDiv(index) {
      this.showDivs[index] = false;
    },
    showDiv(index) {
      this.$nextTick(() => { // 确保dom更新后再执行动画
        this.startTimer(index);
      });
    },
  },
};
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在这个例子中，我们创建了一个列表，并通过点击按钮每三秒显示一个div。当鼠标离开时，该div会再次隐藏。注意使用了Vue的生命周期钩子`$nextTick()`来确保DOM更新完成再执行后续动画。