vue盒子背景色依次置灰

以下是实现vue盒子背景色依次置灰的代码：

<template>
  <div class="container">
    <div v-for="(item, index) in items" :key="index" :style="{ backgroundColor: item.color }" class="box"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { color: '#ccc' },
        { color: '#ccc' },
        { color: '#ccc' },
        { color: '#ccc' },
        { color: '#ccc' }
      ]
    }
  },
  mounted() {
    let index = 0
    setInterval(() => {
      if (index === this.items.length) {
        index = 0
      }
      this.items[index].color = '#ccc'
      index++
    }, 1000)
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  transition: background-color 0.5s ease;
}
</style>

在这个例子中，我们使用了Vue的v-for指令来循环渲染多个盒子，并使用setInterval函数来定时改变每个盒子的背景颜色。我们通过改变每个盒子的背景颜色来实现盒子背景色依次置灰的效果。