Vue 3 类绑定时标签保留空class属性问题如何解决？

问题根因 #

该差异是Vue3与Vue2对class绑定的底层处理逻辑不同导致的：Vue2会自动合并过滤所有空值后判断是否保留class属性，Vue3默认仅对非数组形式的空值绑定做属性移除处理，数组内的空值不会触发属性自动删除。

解决方案 #

方案1：单class场景移除数组包裹

仅需要动态切换单个class时，不要把三元表达式放在数组中，直接写在:class属性内即可，isActive为false时不会生成空class属性：

<!-- 对象语法默认不会生成空class -->
<div :class='{"someClass": isActive}'>some text</div>
<!-- 三元表达式不包裹数组，返回undefined时不会生成空class -->
<div :class='isActive ? "someClass" : undefined'>undef class</div>

方案2：多class场景使用过滤工具函数

需要同时绑定多个动态class时，注册全局工具函数过滤空值：

// 注册全局工具函数，可直接在模板中调用
app.config.globalProperties.$filterClass = function(classList) {
  const validClass = classList.filter(Boolean).join(' ')
  return validClass || undefined
}

模板调用方式：

<div :class="$filterClass([isActive ? 'someClass' : '', isHighlight ? 'highlight' : null])">多class绑定</div>

返回值为空时函数直接返回undefined，Vue3不会为undefined的属性生成对应DOM属性。

方案3：全局自定义指令批量处理

如果需要全项目统一避免空class属性，注册全局v-class指令替代原生:class：

app.directive('class', {
  beforeMount(el, binding) {
    let classVal = binding.value
    if(Array.isArray(classVal)) classVal = classVal.filter(Boolean).join(' ')
    if(classVal) el.className = classVal
  },
  updated(el, binding) {
    let classVal = binding.value
    if(Array.isArray(classVal)) classVal = classVal.filter(Boolean).join(' ')
    el.className = classVal || ''
  }
})

模板中直接使用v-class替代:class即可自动过滤空值，不会生成空class属性。

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