js现在有一串数据，storeroom= [{ list: "1列", layer: [{ tier: "1层", status: false, color: 'red' }, { tier: "2层", status: true, color: 'red' }, { tier: "3层", status: true, color: 'red' }] }, { list: "2列", layer: [{ tier: "1层", status: true, color: 'red' }, { tier: "2层", status: false, color: 'red' }, { tier: "3层", status: true, color: 'red' }] }]现在使用vue的v-for循环上面的storeroom数据，怎么实现点击不同的tier(层数)改变相对应的背景颜色，列如：点击2列1层，此时背景颜色是红色，点击后变成黄色，再次点击又变成红色

在Vue中，你可以使用`v-for`来循环遍历`storeroom`数组，并使用动态绑定样式来改变背景颜色。你可以将每个层级的状态（status）保存在数据中，并在点击时切换状态以改变背景颜色。

下面是一个实现的示例代码：

<template>
  <div>
    <div v-for="(column, columnIndex) in storeroom" :key="columnIndex">
      <div>{{ column.list }}</div>
      <div v-for="(layer, layerIndex) in column.layer" :key="layerIndex" :class="{ active: layer.status }" @click="toggleStatus(columnIndex, layerIndex)">
        {{ layer.tier }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      storeroom: [
        {
          list: "1列",
          layer: [
            { tier: "1层", status: false, color: 'red' },
            { tier: "2层", status: true, color: 'red' },
            { tier: "3层", status: true, color: 'red' }
          ]
        },
        {
          list: "2列",
          layer: [
            { tier: "1层", status: true, color: 'red' },
            { tier: "2层", status: false, color: 'red' },
            { tier: "3层", status: true, color: 'red' }
          ]
        }
      ]
    };
  },
  methods: {
    toggleStatus(columnIndex, layerIndex) {
      this.storeroom[columnIndex].layer[layerIndex].status = !this.storeroom[columnIndex].layer[layerIndex].status;
    }
  }
};
</script>

<style>
.active {
  background-color: yellow;
}
</style>

在上述示例中，使用了`v-for`指令来循环遍历`storeroom`数组，动态绑定了每个层级元素的样式类。通过绑定`click`事件并在`toggleStatus`方法中切换每个层级的状态，从而实现点击时改变背景颜色。使用`active`类来定义选中状态下的背景颜色。

这样，当你点击不同的层级时，相应的背景颜色会改变。再次点击则会切换回原来的颜色。