Vue3中如何获取当前绑定元素的类名？

我有如下div元素：

<div class="center-align" :class="setDisplay()">
    <div class="lds-hourglass"></div>
</div>

我需要判断该div是否包含center-align类名，从而在setDisplay函数中执行对应逻辑。我的Vue3 setup代码如下：

setup() {
  const setDisplay = () => {
    console.log(this.$el);
  }
  return {
    setDisplay
  }
}

但this.$el返回undefined，尝试this.$el.className也无效，请问问题出在哪里？

核心问题：Vue3 Setup中没有this上下文 #

在Vue3的setup函数里，不存在Vue2中的this对象，直接调用this.$el必然返回undefined。而且就算能拿到this，在:class的计算函数执行时，目标元素可能还未完成挂载，同样会导致获取DOM失败。

正确实现方式 #

方式1：用响应式变量控制（推荐）

既然center-align是你手动写在模板里的固定类，完全可以用响应式变量来标记它的状态，避免直接操作DOM：

import { ref } from 'vue'

setup() {
  // 用变量标记是否存在center-align类
  const hasCenterAlign = ref(true)

  const setDisplay = () => {
    if (hasCenterAlign.value) {
      // 执行类存在时的逻辑，返回对应类名
      return 'target-display-class'
    }
    return ''
  }

  return {
    setDisplay,
    hasCenterAlign
  }
}

模板可同步调整为：

<div :class="['center-align', setDisplay()]">
    <div class="lds-hourglass"></div>
</div>

方式2：通过ref获取DOM（必须操作DOM时使用）

如果确实需要基于DOM的实际类名判断，要使用Vue3的ref绑定元素，并且在元素挂载完成后再访问：

import { ref, onMounted } from 'vue'

setup() {
  const containerRef = ref(null)
  const displayClass = ref('')

  const setDisplay = () => {
    return displayClass.value
  }

  // 组件挂载后才能确保DOM存在
  onMounted(() => {
    if (containerRef.value?.classList.contains('center-align')) {
      displayClass.value = 'target-display-class'
    }
  })

  return {
    setDisplay,
    containerRef
  }
}

对应模板修改：

<div ref="containerRef" class="center-align" :class="setDisplay()">
    <div class="lds-hourglass"></div>
</div>

注意事项 #

不要在:class的计算函数里直接获取DOM，这个函数会在组件渲染的多个阶段触发，此时DOM可能还未初始化，极易出现undefined问题。优先遵循Vue的响应式设计，用变量控制状态而非直接操作DOM。

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