vue 模板里的 class 里如何使用变量？

Question

有段代码如下：

<td class="bBallTd" v-for="index of data.blue_num"><span :class="[item.blue_list.indexOf(index) === -1 ? 'fB' : 'blue fW', 'circle bball']">{{index}}</span></td>

上面代码里的 span 标签的 class 样式，我希望再加一个 red{{index}} 的样式，我直接这样写，直接展示的 class 值为 blue fW circle bball blue{{index}} ，这个 index 是个数字值，值类似为 1,2,3,4,5,6 ...... 这种的。

请问一下大佬这里该怎么处理呢？谢谢。

Answer 1

你就当成JS来书写就好了。
比如说

<div
  v-for="index of data.blue_num"
  :class="['blue', 'blue' + index, 'fw', 'circle']"
>{{ index }}</div>