Vue.js 2中如何根据ID为指定元素添加/移除类名？

嗨，这个问题我之前做项目的时候也踩过坑！核心原因就是你的当前逻辑没有对特定ID做区分，导致操作扩散到了所有元素。下面给你分享几种Vue里实用且符合最佳实践的解决方法：

方法一：用ref精准定位单个元素 #

如果是单个固定的目标元素，给它加上ref属性，然后通过Vue实例的$refs获取到该元素，再用原生的classList方法操作类名，这样只会影响目标元素：

<template>
  <div>
    <!-- 给目标元素加ref -->
    <div id="special-element" ref="targetElement">我是需要操作的指定元素</div>
    <button @click="toggleTargetClass">切换类名</button>
  </div>
</template>

<script>
export default {
  methods: {
    toggleTargetClass() {
      // 先判断元素是否存在，避免报错
      if (this.$refs.targetElement) {
        // 切换active类名
        this.$refs.targetElement.classList.toggle('active');
      }
    }
  }
}
</script>

<style scoped>
.active {
  background-color: #42b983;
  color: white;
  padding: 8px;
}
</style>

方法二：列表场景下用条件类名绑定 #

如果是v-for循环渲染的多个元素，你可以通过一个响应式变量记录当前要操作的ID，然后在模板中通过条件判断只给匹配ID的元素加类：

<template>
  <div>
    <div 
      v-for="item in itemList" 
      :key="item.id" 
      :id="`item-${item.id}`"
      <!-- 只有当item.id等于activeItemId时，才添加active类 -->
      :class="{ active: activeItemId === item.id }"
    >
      {{ item.content }}
    </div>
    <button @click="toggleItemClass(2)">切换ID为2的元素类名</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, content: '列表元素1' },
        { id: 2, content: '列表元素2' },
        { id: 3, content: '列表元素3' }
      ],
      activeItemId: null
    }
  },
  methods: {
    toggleItemClass(targetId) {
      // 切换：如果当前激活的是目标ID，就取消；否则设置为目标ID
      this.activeItemId = this.activeItemId === targetId ? null : targetId;
    }
  }
}
</script>

<style scoped>
.active {
  border-left: 4px solid #42b983;
  padding-left: 12px;
  font-weight: bold;
}
</style>

这种方式完全遵循Vue数据驱动视图的设计理念，不会直接操作DOM，是列表场景下的最优解。

方法三：直接通过ID获取DOM（不推荐，应急可用） #

如果你只是临时需要快速实现，也可以用原生JS的document.getElementById()直接获取元素操作，但这种方式会绕开Vue的响应式系统，可能导致视图和数据不一致，所以尽量不用：

<template>
  <div>
    <div id="quick-target">应急操作的元素</div>
    <button @click="toggleQuickClass">切换类名</button>
  </div>
</template>

<script>
export default {
  methods: {
    toggleQuickClass() {
      const target = document.getElementById('quick-target');
      if (target) {
        target.classList.toggle('active');
      }
    }
  }
}
</script>

总结一下：单个元素用ref，列表元素用条件类名绑定，这两种方法既符合Vue的设计思想，又能精准控制指定ID的元素。

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