vue.js - 根据计算属性的结果显示不同颜色的文本？

Question

目前我有一些类似的东西:

data(){
    return {
        summonerMatches: '',
    }
},
computed: {
    highestMultikill(){
        let highestMultikill = 0;

        for (let match of this.summonerMatches.matches) {
            if (highestMultikill < match.mainParticipant.stats.largestMultiKill) {
                highestMultikill = match.mainParticipant.stats.largestMultiKill
            }
        }

        return highestMultikill
    },
}

当我在模板中使用此计算属性时，如下所示:

<p>{{ highestMultikill }}</p>

我渲染了一个数字，象征着用户的最高多重杀戮。现在我想以某种方式向该 <p> 添加一个类基于最高 MultiKill 的元素。如果highestMultiKill = 1，则设置一个将颜色更改为蓝色的类，如果highestMultiKill = 5，则设置一个将颜色更改为红色的类，等等。

我不确定如何使用当前的设置来做到这一点。我正在考虑让计算属性返回一个完全不同的 <p>基于最高Multikill 变量的元素，如下所示:

if (highestMultiKill == 1) {
    return <p class='blue'>highestMultiKill</p>
} else {
    return a different `<p>` element with a different class
}

这是正确的方法吗？

Answer 1

下面是一个具有更复杂逻辑和受 BEM 启发的类名的示例:

<template>
  <p :class="klass">{{ highestMultiKill }}</p>
</template>

<script>
export default {
  data() {
    return { highestMultiKill: 0 };
  },
  computed: {
    klass() {
      return {
        score: true, // Always have a score class
        'score--low': this.highestMultiKill <= 2,
        'score--medium': this.highestMultiKill > 2 && this.highestMultiKill <= 5,
        'score--high': this.highestMultiKill > 5 && this.highestMultiKill <= 10,
        'score--blood-lust': this.highestMultiKill > 10,
      };
    },
  },
};
</script>

<style scoped>
.score {
  line-height: 2;
}

.score--low {
  color: blue;
}
.score--medium {
  color: pink;
}
.score--medium {
  color: red;
}
.score--medium {
  color: darkred;
}
</style>

这个想法是，p 将具有一个类似以下的类:score Score--medium