如何以编程方式添加Vue的v-bind:class动态绑定类？

嘿，这个问题问得好！其实Vue的v-bind:class之所以能实现动态绑定，核心是靠响应式数据驱动，而不是直接操作DOM。咱们分两种情况来聊，先讲最符合Vue设计理念的正确姿势，再说说如果非得手动操作DOM该怎么处理～

不管是Vue 2还是Vue 3，最优雅的方式都是让数据来控制类的显示，完全不用手动操作DOM：

Vue 2 写法 #

1. 先在data里定义控制条件的变量：

data() {
  return {
    radio: '' // 这个变量就是你用来判断的条件
  }
}

2. 模板里直接用v-bind:class绑定（假设元素是循环生成的，需要存储ref数组）：

<div 
  v-for="(item, index) in list" 
  :ref="el => { if (el) mycells[index] = el }" 
  v-bind:class="{ active: radio === 'link' }"
>
  {{ item }}
</div>

3. 之后只要修改this.radio的值，类就会自动更新：

// 当你想给元素加上active类时
this.radio = 'link'
// 想移除active类时，改成其他值即可
this.radio = 'other'

Vue 3 Composition API 写法 #

1. 在setup里定义响应式变量：

import { ref } from 'vue'

export default {
  setup() {
    const radio = ref('')
    const mycells = ref([]) // 存储DOM元素的数组

    return { radio, mycells }
  }
}

2. 模板写法类似：

<div 
  v-for="(item, index) in list" 
  :ref="el => { if (el) mycells[index] = el }" 
  :class="{ active: radio === 'link' }"
>
  {{ item }}
</div>

3. 修改变量时自动更新类：

// 直接修改ref的value属性
radio.value = 'link' // 给元素加上active类
radio.value = '' // 移除active类

如果因为某些特殊需求，你必须通过$refs手动操作DOM来实现类似的动态绑定，那可以通过监听响应式变量的变化来手动添加/移除类：

Vue 2 示例 #

data() {
  return {
    radio: ''
  }
},
watch: {
  // 监听radio变量的变化，同步更新DOM类名
  radio(newVal) {
    const targetCell = this.$refs.mycells[123]
    if (!targetCell) return // 确保DOM元素已挂载

    if (newVal === 'link') {
      targetCell.classList.add('active')
    } else {
      targetCell.classList.remove('active')
    }
  }
}

Vue 3 示例 #

import { ref, watch } from 'vue'

export default {
  setup() {
    const radio = ref('')
    const mycells = ref([])

    // 监听radio的变化，手动控制类名
    watch(radio, (newVal) => {
      const targetCell = mycells.value[123]
      if (!targetCell) return

      newVal === 'link' 
        ? targetCell.classList.add('active') 
        : targetCell.classList.remove('active')
    })

    return { radio, mycells }
  }
}

⚠️ 注意：这种手动操作DOM的方式并不推荐，因为Vue的核心是数据驱动视图，直接操作DOM容易导致数据和视图状态不一致，后期维护起来也麻烦。除非万不得已，尽量用第一种响应式的方案～

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