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

Question

我正在尝试使用 chartist.js 遍历圆环图的标签数组，我无法弄清楚 chartist.js 是否可以将标签放在侧面而不是内部甜甜圈图。我想在 v-for 渲染的每个元素上传递一个不同的 css class ，这样我就可以将圆环图的相同颜色放入其对应标签中。因此，如果在图表中 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>

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

How to render different CSS classes in each element using v-for

javascript

css

vue.js

chartist.js

vue-component