Question

所以我是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动态添加border-stage类。

  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。这里有点困惑！

我知道必须有一种更有效的方式来执行此操作，但我无法弄清楚！谢谢！

Answer 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>

Answer 2

如果使用如下所示的v-bind，则可以使用模板字符串：

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

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

有没有比这更好的在Vue中动态添加类的方法呢？

2 个答案: