vue 一组数据三次一播放 重复

您可以使用Vue的计算属性和setInterval函数来实现一组数据三次一播放的效果。您可以将数据存储在Vue的data属性中，然后创建一个计算属性来返回每三个数据为一组的数组。在计算属性中，您可以使用JavaScript的splice()方法来将数组切分为三个一组的子数组。接下来，您可以使用setInterval函数来定时更新计算属性中的数据，以实现播放效果。下面是一个简单的示例代码：

<template>
  <div>
    <div v-for="(group, index) in dataGroups" :key="index">
      <!-- 根据需要展示每组数据 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [1, 2, 3, 4, 5, 6, 7, 8, 9], // 原始数据
      intervalId: null // 保存setInterval返回的ID
    }
  },
  computed: {
    dataGroups() {
      const groups = []
      for (let i = 0; i < this.data.length; i += 3) {
        groups.push(this.data.slice(i, i + 3))
      }
      return groups
    }
  },
  mounted() {
    // 每三秒更新数据
    this.intervalId = setInterval(() => {
      // 将数据向左移动一位
      this.data.push(this.data.shift())
    }, 3000)
  },
  beforeDestroy() {
    clearInterval(this.intervalId) // 在组件销毁前清除定时器
  }
}
</script>

在上面的示例代码中，我们使用了Vue的生命周期钩子函数mounted来启动setInterval函数，该函数每三秒更新一次数据。同时，在组件销毁前，我们使用了beforeDestroy钩子函数来清除定时器，以避免内存泄漏。