根据计算属性的结果显示不同颜色的文本？答案

【问题标题】：Displaying text with different color based on result from a computed property?根据计算属性的结果显示不同颜色的文本？
【发布时间】：2019-09-15 01:05:44
【问题描述】：

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

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>

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

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

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

这是正确的做法吗？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

你可以像这样使用条件类：

<p :class="highestMultiKill == 1 ? 'blue' : 'otherClass'">highestMultiKill</p>

在此处查看full documentation on conditional classes in Vue.js。

顺便说一下，如果 summonerMatches 实际上是具有反应属性的对象，则不应使用字符串初始化它。

【讨论】：

但是如果逻辑比较长，或者有多个if else怎么办？
正如@sevensidemarble 建议的那样，您可以在这种情况下使用计算属性。

【解决方案2】：

这是一个具有更复杂逻辑和受 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

【讨论】：

【解决方案3】：

如果您有涉及许多变量和/或类的复杂逻辑，最好的方法是这样的：

<p :class="killClass"></div>

computed: {
  killClass: function () {
    return {
      highestMultiKill >= 3 ? 'blue' : 'red'
    }
  }
}

如果您有更多类/状态，请改用 if 语句。

【讨论】：

【解决方案4】：

此示例可以使用：

<html>
  <head>

  </head>
  <body>

    <div id="container">
      <p v-if="this.computedValue==0" style="color:blue;" >content0</p>
      <p v-if="this.computedValue==1" style="color:red;" >content1</p>
      <p v-if="this.computedValue==2" style="color:green;" >content2</p>
      <p v-if="this.computedValue==3" style="color:yellow;" >content3</p> 
      <p v-if="this.computedValue==4" style="color:pink;" >content4</p>
      <p v-if="this.computedValue==5" style="color:aquamarine;" >content5</p>
      <p v-if="this.computedValue==6" style="color:blueviolet;" >content6</p>
      <p v-if="this.computedValue==7" style="color:brown;" >content7</p>
      <p v-if="this.computedValue==8" style="color:chartreuse;" >content8</p>
      <p v-else>content9</p>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
    <script>

      new Vue({
        el: '#container',
        data: {
          value: '',
        },
        computed: {
          computedValue: function() {
            var styleNumber = 0;/*return a number based on a logic*/

            return styleNumber; 
          }
        }
      });

    </script>

  </body>
</html>

【讨论】：