Vue.js：含变量的多类名动态绑定失效，求优雅解决方案

你的问题出在:class对象语法中动态键的写法上，Vue无法直接识别模板字符串作为对象的键名，以下两种优雅的解决方式：

方式一：数组语法（推荐，可读性更高） #

直接用数组混合静态类、动态变量类和条件类：

<div v-for="card in cards" :key="card.id" 
     :class="[
       'card', 
       `card${card.rank}`, 
       isFadeProp ? 'cardFade' : ''
     ]"> 
  <span class="card__number">{{ card.rank }} </span>       
</div>

数组中每个元素对应一类：

• 'card' 是静态类
• `card${card.rank}` 是基于变量生成的动态类
• isFadeProp ? 'cardFade' : '' 是依赖prop的条件类，当isFadeProp为真时添加

方式二：修正对象语法 #

如果偏好对象语法，需要用方括号包裹动态生成的键名，让Vue解析变量：

<div v-for="card in cards" :key="card.id" 
     class="card"
     :class="{
       [`card${card.rank}`]: true, 
       'cardFade': isFadeProp
     }"> 
  <span class="card__number">{{ card.rank }} </span>       
</div>

这里[card${card.rank}]会被解析为动态的类名（比如card1、cardA），true表示始终添加该类；'cardFade': isFadeProp则根据prop的值决定是否添加。

内容的提问来源于stack exchange，提问作者GL.awog