Vue技术问题：点击事件修改div颜色后，鼠标移出时颜色自动复原

这个问题的核心在于你直接操作DOM修改样式，但Vue是数据驱动框架，你的:style="monomerButton"绑定会在组件重新渲染时（比如鼠标移出触发hover状态变化）覆盖掉手动设置的DOM样式，导致颜色复原。下面给你一套符合Vue思想的解决方案：

原因分析 #

你当前的实现存在两个关键问题：

1. 点击时通过event.target修改DOM的backgroundColor，但Vue的响应式样式绑定会在组件更新时重置这个值
2. 组件级的hover变量会让所有div共享悬停状态，同时鼠标移出触发的状态更新会强制重新计算初始样式，覆盖手动修改的颜色

解决方案：用数据驱动样式，避免直接操作DOM #

我们需要用状态记录每个单体的选中状态，通过Vue的响应式系统动态计算最终背景色，彻底摆脱DOM操作的依赖。

步骤1：处理选中状态（避免修改props） #

因为monomers是父组件传过来的props，不能直接修改，所以在组件A的本地数据里复制一份，并添加selected属性：

export default {
  props: ['monomers'],
  data() {
    return {
      // 复制props数据，给每个单体添加选中状态，默认未选中
      localMonomers: this.monomers.map(monomer => ({ ...monomer, selected: false }))
    }
  },
  // ...其他代码
}

步骤2：动态计算样式 #

用计算属性定义基础样式和选中样式，让Vue自动根据状态合并最终样式：

computed: {
  baseButtonStyle() {
    // 保留你原来的初始颜色逻辑
    return {
      backgroundColor: getNodeColor(this.monomers[0].polymerType, this.monomers[0].naturalAnalog)
    }
  },
  selectedButtonStyle() {
    // 点击后的选中颜色
    return {
      backgroundColor: "rgba(44, 224, 203, 0.5)"
    }
  }
}

步骤3：修改模板与点击事件 #

把循环对象换成localMonomers，点击时直接切换当前单体的selected状态，用数组语法合并样式（选中样式优先级更高）：

<li v-for="monomer in localMonomers" :key="monomer.symbol">
  <div 
    :style="[baseButtonStyle, monomer.selected ? selectedButtonStyle : {}]"
    class="monomer-button"
    @click="monomer.selected = !monomer.selected"
  >
    <p class="monomer-symbol">{{monomer.symbol}}</p>
  </div>
</li>

步骤4：用CSS处理悬停状态（更简洁） #

原来的组件级hover变量会导致所有div共享悬停状态，我们直接用CSS伪类处理单个元素的悬停效果，无需额外状态管理：

.monomer-button:hover {
  /* 自定义悬停颜色，比如比初始色深一点 */
  background-color: rgba(60, 230, 210, 0.6);
}

为什么这样有效？ #

• 所有样式由Vue响应式状态驱动，不会出现手动DOM操作被覆盖的情况
• 选中状态绑定到单个单体，点击后自动触发样式重新计算
• CSS伪类天然针对单个元素，性能更好且逻辑更清晰

如果需要支持单选（只能选中一个单体），只需要在点击事件里清空其他单体的selected状态即可：

selectMonomer(targetMonomer) {
  this.localMonomers.forEach(monomer => {
    monomer.selected = monomer === targetMonomer ? !monomer.selected : false;
  });
}

内容的提问来源于stack exchange，提问作者Hanzestudent