基于数据属性的动态类

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>

希望对你有帮助。