基于数据属性的动态类

Question

我收集了一些经过迭代的卡。每张卡片都具有颜色属性，我想将其用作div类的一部分以为其赋予动态背景。当前代码是：

      <div v-for="card in cards" :key="card.id">
        <div class="bg-red-600">{{ card.category | uppercase }}</div>
        <div>{{ card.title }}</div>
      </div>

在这种情况下，值bg-red-600中的red应该替换为card.color。我该怎么办？

Answer 1

您有很多选择。 在模板中：

  <div :class="`bg-${card.color}-600`">{{ card.category | uppercase }}</div>

通过单独的方法：

methods: {
  colorMethod(color) {
    return `bg-${color}-600`;
  },
},

<div :class="colorMethod(card.color)">{{ card.category | uppercase }}</div>

希望有帮助。