【问题标题】:Dynamic class based on data attribute基于数据属性的动态类
【发布时间】:2019-08-15 10:46:47
【问题描述】:

我有一组经过迭代的卡片。每张卡片都有一个颜色属性,我想将其用作 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。我该怎么做?

【问题讨论】:

    标签: vue.js vuejs2


    【解决方案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>
    

    希望对你有帮助。

    【讨论】:

    • @John 很高兴听到!
    猜你喜欢
    • 2017-06-16
    • 2023-03-21
    • 2019-03-22
    • 2011-06-12
    • 2021-03-23
    • 2018-09-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多