还有比这更好的在 Vue 中动态添加类的方法吗？答案

【问题标题】：Is there a better way of dynamically adding classes in Vue than this?还有比这更好的在 Vue 中动态添加类的方法吗？
【发布时间】：2020-03-13 16:26:51
【问题描述】：

所以我是 Vue.js 的菜鸟，我正在尝试根据状态更改卡片的边框颜色。我正在呈现课程列表，根据课程在课程中的哪个阶段 (1-9)，我希望课程有不同的颜色边框。

<template>
  <div class="course-list">
    <div class="course-card" :class='borderClass[course.stage]' v-for="course in courses" :key="course.id">
      <div class="card-header">Stage {{course.stage}}</div>
      <div class="card-body">
        <h5 class="card-title">{{course.title}}</h5>
        <p class="card-text">{{course.creator}}</p>
        <p class="card-text">{{course.hours}} Hours</p>
        <div class="add-btn" :class='bgClass[course.stage]'><i class="fas fa-plus fa-2x"></i></div>
        </div>
    </div>
  </div>

我正在使用 v-bind 来动态添加边界阶段类。

  data() {
    return {
      borderClass: {
        '1' : 'border-stage1',
        '2' : 'border-stage2',
        '3' : 'border-stage3',
        '4' : 'border-stage4',
        '5' : 'border-stage5',
        '6' : 'border-stage6',
        '7' : 'border-stage7',
        '8' : 'border-stage8',
        '9' : 'border-stage9',
      }
}
}

然后在一个 sass 文件中：

// Stage borders
.border-stage1 {
  border-top: 8px solid $red;
  border-right: 8px solid $red; 
}

.border-stage2 {
  border-top: 8px solid orange;
  border-right: 8px solid orange;
}

.border-stage3 {
  border-top: 8px solid orangered;
  border-right: 8px solid orangered;
}

.border-stage4 {
  border-top: 8px solid $green;
  border-right: 8px solid $green;
}

.border-stage5 {
  border-top: 8px solid $blue;
  border-right: 8px solid $blue;
}

.border-stage6 {
  border-top: 8px solid $teal;
  border-right: 8px solid $teal;
}

.border-stage7 {
  border-top: 8px solid $pink;
  border-right: 8px solid $pink;
}

.border-stage8 {
  border-top: 8px solid $info;
  border-right: 8px solid $info;
}

.border-stage9 {
  border-top: 8px solid #fff;
  border-right: 8px solid #ffff;
}

我最初想做的是使用模板字符串来做这样的事情 :class=`border-stage{{course.stage}}`

但显然这不起作用，据我了解，我正在以一种无法完成的方式混合 css 和 js。这里有点困惑！

我知道必须有更有效的方法来做到这一点，但我想不通！谢谢！

【问题讨论】：

标签： javascript css vue.js sass

【解决方案1】：

我更喜欢这个。

<template>
    <div class="course-list">
        <div class="course-card" v-for="(course, index) in courses" :key="index" :class="'border-stage' + course.stage">
        <div class="card-header">Stage {{course.stage}}</div>
        <div class="card-body">
            <h5 class="card-title">{{course.title}}</h5>
            <p class="card-text">{{course.creator}}</p>
            <p class="card-text">{{course.hours}} Hours</p>
            <div class="add-btn" :class='bgClass[course.stage]'><i class="fas fa-plus fa-2x"></i></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    }
}
</script>

<style lang="sass">
    // Stage borders
    .border-stage1 {
    border-top: 8px solid $red;
    border-right: 8px solid $red; 
    }

    .border-stage2 {
    border-top: 8px solid orange;
    border-right: 8px solid orange;
    }

    .border-stage3 {
    border-top: 8px solid orangered;
    border-right: 8px solid orangered;
    }

    .border-stage4 {
    border-top: 8px solid $green;
    border-right: 8px solid $green;
    }

    .border-stage5 {
    border-top: 8px solid $blue;
    border-right: 8px solid $blue;
    }

    .border-stage6 {
    border-top: 8px solid $teal;
    border-right: 8px solid $teal;
    }

    .border-stage7 {
    border-top: 8px solid $pink;
    border-right: 8px solid $pink;
    }

    .border-stage8 {
    border-top: 8px solid $info;
    border-right: 8px solid $info;
    }

    .border-stage9 {
    border-top: 8px solid #fff;
    border-right: 8px solid #ffff;
    }
</style>

【讨论】：

谢谢，但是课程数组包含同一阶段的课程，由选择菜单过滤，所以这不起作用。
我明白了，在这种情况下将index + 1 替换为course.stage，我已经编辑了我的答案。

【解决方案2】：

如果你使用这样的 v-bind，你可以使用模板字符串：

<div class="course-card" :class="`border-stage${course.stage}`"

当使用 v-bind 时，引号之间的部分只是 javascript。

【讨论】：