title: Displaying text with different color based on result from a computed property?
body: <p>Currently I have something along the lines of:</p>
  
  <pre><code>data(){
      return {
          summonerMatches: '',
      }
  },
  computed: {
      highestMultikill(){
          let highestMultikill = 0;
  
          for (let match of this.summonerMatches.matches) {
              if (highestMultikill &lt; match.mainParticipant.stats.largestMultiKill) {
                  highestMultikill = match.mainParticipant.stats.largestMultiKill
              }
          }
  
          return highestMultikill
      },
  }
  </code></pre>
  
  <p>When I use this computed property in my template like this:</p>
  
  <pre><code>&lt;p&gt;{{ highestMultikill }}&lt;/p&gt;
  </code></pre>
  
  <p>I render a number that symbolizes the highest multi kill of a user. Now I would like to somehow add a class to that <code>&lt;p&gt;</code> element based on the highestMultiKill. If highestMultiKill = 1, set a class that changes the color to blue, if highestMultiKill = 5, set a class that changes the color to red, etc.</p>
  
  <p>I'm not sure how to do that with my current setup. I was thinking about having the computed property return an entire different <code>&lt;p&gt;</code>element based on the highestMultikill variable like this:</p>
  
  <pre><code>if (highestMultiKill == 1) {
      return &lt;p class='blue'&gt;highestMultiKill&lt;/p&gt;
  } else {
      return a different `&lt;p&gt;` element with a different class
  }
  </code></pre>
  
  <p>Is this the correct way to do this?</p>