How to toggle div colors in one line based on 3 values

March 25, 2022

I have values coming back from an API (easy,medium,hard) : For each of these values, i’d like to affect a color depending on the difficulty and I’d like to do it in one line.
So basically here is what I like to do in some sort of an HTML algorithm ( I’m using VueJS):

   <div if(difficulty is easy) then color is green 
    else if (difficulty is medium) then color is yellow
   else if (difficulty is hard) then color is red></div>

Is it even possible to do this in one line of code with a v-if or a ternary operator?? and If so, how can I do it?

>Solution :

I’d use CSS.

<style>
.easy {background-color: green;}
.medium {background-color: yellow;}
.hard {background-color: red;}
</style>
<div class='easy'>easy</div>
<div class='medium'>medium</div>
<div class='hard'>hard</div>