Vue.js中for循环内动态绑定CSS类不生效如何解决

错误原因 #

你当前写法失效的核心问题是HTML属性定界符使用错误：

• 你给:class赋值时直接用JS模板字符串的反引号（`）作为属性值的包裹边界，不符合HTML语法规范——HTML属性值必须使用单引号/双引号作为定界符，反引号只能作为属性值内部JS表达式的语法使用，直接放在属性外层会导致Vue无法正确解析绑定的JS表达式。
• 从你能正常渲染{{ category.name }}的表现来看，v-for循环内category变量的访问路径是正常的，不需要额外处理ref的.value问题（Vue模板会自动解包模板内访问的ref值）。

正确写法 #

将:class的属性值整体用双引号包裹，内部写合法的JS模板字符串表达式即可：

<strong :class="`color-${category.level}`">{{ category.name }}</strong>

如果不习惯模板字符串，也可以用字符串拼接的写法，效果完全一致：

<strong :class="'color-' + category.level">{{ category.name }}</strong>

扩展场景写法 #

如果需要同时绑定固定类、多个动态类或者加条件判断，可以用:class的数组/对象语法：

• 数组语法（同时绑定固定类+动态类）：

<strong :class="['category-tag', `color-${category.level}`]">{{ category.name }}</strong>

• 对象语法（按条件绑定类名）：

<strong :class="{
  'font-bold': category.isHot,
  [`color-${category.level}`]: !!category.level
}">{{ category.name }}</strong>

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