Vue计算属性中使用模板字符串返回类名遇变量未识别问题

你的问题出在对象键的写法上：你把模板字符串用单引号包起来，导致它变成了固定字符串`my-class-${colorClassName}`，而不是解析colorClassName变量后的动态类名。

正确写法 #

情况1：需要根据props.myProp控制类名是否生效（保持对象形式） #

把对象的键用方括号包裹，让模板字符串作为动态键被解析：

const className = computed(() => {
  return {
    [`my-class-${colorClassName}`]: props.myProp
  }
})

情况2：直接返回生成的类名字符串（无需条件控制） #

如果不需要根据props.myProp判断，直接返回解析后的字符串更简洁：

const className = computed(() => {
  return `my-class-${colorClassName}`
})

修改后，模板中:class="className"就能正常识别动态生成的类名了，computed会随着colorClassName或props.myProp的变化自动更新类名。

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