如何在Vue中根据DOM加载的文本内容为元素添加条件类名？

可以实现，根据你的DOM渲染场景，有两种常用的落地方案：

方案一：颜色文本由Vue响应式数据渲染（最推荐） #

如果你的span标签是从Vue的数据源循环渲染生成的，直接通过动态绑定class即可实现，不需要操作DOM：

<template>
  <div>
    <span
      v-for="(color, index) in colorList"
      :key="index"
      :class="`color_${color}`"
    >
      {{ color }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colorList: ['yellow', 'red', 'grey']
    }
  }
}
</script>

<style>
.color_yellow {
  color: #ff0;
}
.color_red {
  color: #f00;
}
.color_grey {
  color: #aaa;
}
</style>

方案二：颜色文本是静态写死的DOM #

如果你的span标签是后端直接返回的静态HTML片段、没有绑定Vue数据源，可以在mounted钩子中获取DOM内容后添加类名：

<template>
  <div ref="colorWrap">
    <span>yellow</span>
    <span>red</span>
    <span>grey</span>
  </div>
</template>

<script>
export default {
  mounted() {
    const spanNodes = this.$refs.colorWrap.querySelectorAll('span')
    // 可选加合法颜色校验，避免生成非法类名
    const validColorSet = new Set(['yellow', 'red', 'grey'])
    spanNodes.forEach(node => {
      const text = node.textContent.trim()
      if (validColorSet.has(text)) {
        node.classList.add(`color_${text}`)
      }
    })
  }
}
</script>

如果需要后续动态更新文本内容时同步更新类名，方案一默认支持响应式更新，方案二需要额外监听DOM变化或者绑定数据更新逻辑。

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