vue settimeou v-for每隔三秒展示一个div
时间: 2024-10-20 17:05:08 浏览: 18
在Vue.js中,你可以使用`v-for`循环结合`setTimeout`或者`setInterval`函数来实现每间隔三秒动态渲染一个新的`<div>`元素。以下是一个基本示例:
```html
<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更新完成再执行后续动画。
阅读全文