jiangchengfeiyi-Web/src/views/test.vue

<template>
  <div>
    <div
      v-for="(item, index) in items" 
      :key="index" 
      class="box" 
      @click="changeColor(index)" 
      :style="getBoxStyle(index)"
    >
      {{ item }} 
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref(['Box 1', 'Box 2', 'Box 3']);
    const currentColor = ref(null);

    const changeColor = (index) => {
      currentColor.value = index;
    };

    const getBoxStyle = (index) => ({
      backgroundColor: currentColor.value === index ? 'lightblue' : 'gray'
    });

    return {
      items,
      changeColor,
      getBoxStyle,
    };
  },
};
</script>

<style>
.box {
  width: 200px;
  height: 100px;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 5px 0;
}
</style>