Vue插槽中class属性模板语法不生效，如何正确绑定？

在Vue模板里，直接在class属性中使用{{ result.color }}这种插值语法是不生效的，必须通过v-bind:class（缩写:class）来实现动态类名绑定，Vue才会解析其中的表达式。针对你的需求，这里提供几种可行的写法：

1. 数组+模板字符串（最适配你的场景） #

把静态类名和动态拼接的类名放在数组里，同时结合三元表达式处理success/failure的分支：

<slot v-for="result in data.results" :key="result">
  <span 
    :class="[
      'status', 
      'rounded',
      result.success 
        ? 'status-success bg-success' 
        : `status-failure color-${result.color}`
    ]"
    @mouseenter="showTooltip(result, $event)" 
    @mouseleave="showTooltip(null, $event)"
  ></span>
</slot>

2. 对象语法（适合多条件判断类名） #

如果需要更精细地控制每个类名是否添加，可以用对象语法，键是类名，值是布尔值：

<slot v-for="result in data.results" :key="result">
  <span 
    :class="{
      'status': true,
      'rounded': true,
      'status-success': result.success,
      'bg-success': result.success,
      'status-failure': !result.success,
      [`color-${result.color}`]: !result.success
    }"
    @mouseenter="showTooltip(result, $event)" 
    @mouseleave="showTooltip(null, $event)"
  ></span>
</slot>

3. 字符串直接拼接（简单场景） #

如果只是单个动态类名，也可以直接用模板字符串拼接：

:class="`status rounded ${result.success ? 'status-success bg-success' : `status-failure color-${result.color}`}`"

核心逻辑就是：必须用:class替代原生class来绑定包含变量的类名，Vue会自动处理表达式解析，把最终的类名渲染到DOM上。

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