当前位置：首页 > VUE

vue实现无限循环

2026-03-28 14:18:00VUE

Vue 实现无限循环的方法

使用 v-for 结合计算属性

通过计算属性对数组进行处理，使其呈现无限循环的效果。

<template>
  <div>
    <div v-for="(item, index) in loopedItems" :key="index">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['A', 'B', 'C']
    }
  },
  computed: {
    loopedItems() {
      return [...this.items, ...this.items, ...this.items]
    }
  }
}
</script>

使用 CSS 动画实现视觉无限循环

通过 CSS 的 animation 和 @keyframes 实现视觉上的无限滚动效果。

<template>
  <div class="infinite-loop">
    <div v-for="(item, index) in items" :key="index" class="item">
      {{ item }}
    </div>
  </div>
</template>

<style>
.infinite-loop {
  display: flex;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>

动态更新数组实现无限循环

通过定时器动态更新数组，模拟无限循环的效果。

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['A', 'B', 'C']
    }
  },
  mounted() {
    setInterval(() => {
      this.items.push(this.items.shift())
    }, 1000)
  }
}
</script>

使用第三方库 vue-infinite-loop

安装并使用 vue-infinite-loop 库快速实现无限循环。

vue实现无限循环

npm install vue-infinite-loop

<template>
  <InfiniteLoop :items="items">
    <template v-slot="{ item }">
      <div>{{ item }}</div>
    </template>
  </InfiniteLoop>
</template>

<script>
import InfiniteLoop from 'vue-infinite-loop'

export default {
  components: {
    InfiniteLoop
  },
  data() {
    return {
      items: ['A', 'B', 'C']
    }
  }
}
</script>