vue3中动态添加类名，点击哪个，哪个背景颜色变化

在Vue3中，为了实现动态添加类名并根据点击改变元素的背景颜色，你可以利用JavaScript模板字符串、`v-bind:class`指令以及事件处理程序。首先，在HTML部分，为每个需要响应点击的元素添加一个`<div>`，并在其`class`属性上使用`v-bind:class`：

<div v-for="(item, index) in items" :key="index" @click="changeColor(index)">
  <div :class="{ active: isSelected(index) }">{{ item.name }}</div>
</div>

这里假设`items`是一个包含你要操作的对象数组，每个对象有一个`name`属性。`isSelected`函数用于判断当前元素是否被选中。

然后，在Vue组件的script部分，定义`selectedColors`数据来存储每个元素的初始状态，并实现`changeColor`方法：

export default {
  data() {
    return {
      items: ...,
      selectedColors: { [index]: false for (let index = 0; index < this.items.length; index++) },
    };
  },
  methods: {
    isSelected(index) {
      return this.selectedColors[index];
    },
    changeColor(index) {
      this.selectedColors[index] = !this.selectedColors[index]; // 双向切换状态
      // 如果你想更改背景色，可以这样：
      this.$refs[index].style.backgroundColor = this.selectedColors[index] ? 'your-color' : '';
    },
  },
};

这里，我们使用了ref属性来访问每个元素的DOM节点，然后通过修改`selectedColors`对象来控制背景颜色。当点击某个元素时，它会切换`active`类，从而触发背景颜色的变化。