javascript - 如何使用 v-for 在每个元素中呈现不同的 CSS 类

Question

我正在尝试使用 chartist.js 遍历圆环图的标签数组，我无法确定 chartist.js 是否可以将标签放在圆环图的侧面而不是内部。我想在 v-for 呈现的每个元素上传递一个不同的 css 类，以便我可以将圆环图的相同颜色放入其对应标签中。因此，如果在图表中 x 的值是蓝色，我希望我的 x 标签有一个蓝色的元素符号点。

    <v-flex sm-6 style="margin-top: 15px;">
      <v-layout v-for="(item, index) in labelsAndValuesPieChart.labels" :key="index">

//这是我的“要点，我想在每次迭代时更改颜色”

        <v-flex>
          <span class="dot"></span>
        </v-flex>
        <v-flex>
          <span class="pie-chart-label">{{item}}</span>
        </v-flex>
      </v-layout>
    </v-flex>

Answer 1

根据您在问题下方留下的评论，您只需要生成类似于 ct-series-b 的类。

在这种情况下，您可以创建一个数组来存储所有字母(用于索引到字母的转换)。数组的索引将匹配元素的索引；

let alphabet = ['a', 'b', 'c', 'd', 'e'] // ...

methods: {
  getClass: function(index){
    return 'ct-series-' + alphabet[index];
  }
}

<v-flex>
   <span class="pie-chart-label" :class="getClass(index)">{{item}}</span>
</v-flex>