如何在Vue的:class绑定中引用元素ID（无需点击事件）

直接在v-bind:class="setAreaStyle(id)"里用id是不行的，原因很简单：Vue模板里的变量默认指向Vue实例的data/props/computed等属性，不是DOM元素的id属性。你写的id会被Vue当成要从实例上读取的属性名，而不是当前div的id属性值。

可行的处理方式： #

• 最直接的方案：手动传字符串字面量
  既然你是手动写每个div（不用v-for），每个div的id都是固定值，直接把id字符串作为参数传给函数就行，比如：

  <div v-bind:class="setAreaStyle('CAR')" @click="setFocus($event)" id="CAR"></div>
  <div v-bind:class="setAreaStyle('BIKE')" @click="setFocus($event)" id="BIKE"></div>
  

  这种方式虽然id字符串看起来重复，但逻辑简单，没有额外复杂度，完全适配你当前的场景。

• 进阶方案：利用ref和生命周期钩子关联id与样式
  如果不想重复写id字符串，可以给每个div加ref，在组件挂载完成后通过ref获取DOM元素的id，再动态处理样式逻辑：

  1. 给div添加ref标识：

     <div ref="areaCAR" @click="setFocus($event)" id="CAR"></div>
     <div ref="areaBIKE" @click="setFocus($event)" id="BIKE"></div>
     

  2. 在mounted钩子中预计算样式：

     mounted() {
       this.areaStyles = {};
       // 遍历所有区域ref
       Object.values(this.$refs).forEach(el => {
         const areaId = el.id;
         this.areaStyles[areaId] = this.setAreaStyle(areaId);
       });
     }
     

  3. 模板中绑定预计算好的样式：

     <div :class="areaStyles.CAR" @click="setFocus($event)" id="CAR"></div>
     

  这种方式适合动态处理大量元素的场景，但对于少量手动编写的div，反而不如第一种方案简洁。

补充说明：为什么@click里能拿到id？ #

你之前在@click="setFocus($event)"里能通过$event.target.id拿到元素id，是因为点击事件触发时，真实DOM已经挂载完成，此时可以访问到DOM元素的属性。但Vue在渲染模板、计算v-bind:class的阶段，真实DOM还未生成，自然无法直接获取元素的id属性。

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