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

在Vue中，你可以使用`v-for`指令循环遍历`storeroom`数组，并通过绑定点击事件来改变对应层级的背景颜色。你可以将每个层级的颜色保存在数据中，并在点击时切换颜色来实现背景色的变化。

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

<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" :style="{ backgroundColor: layer.color }" @click="toggleColor(columnIndex, layerIndex)">
        {{ layer.tier }}
      </div>
    </div>
  </div>
</template>

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

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

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