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

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?

javascripthtmlcssvue.js


Solution 1:[1]

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>

Solution 2:[2]

Maybe like following snippet :

new Vue({
  el: '#demo',
  data() {
    return {
      difficulty: 'medium',
    }
  },
})
.red {
  color: red;
}
.green {
  color: green;
}
.yellow {
  color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div :class="difficulty === 'ease' ? 'green' : difficulty === 'medium' ? 'yellow' : 'red'">medium</div>
</div>

Solution 3:[3]

I just would use some class binding with :class. You can use the difficulty as a string itself and bind the class to the dom object.

Vue.createApp({
  data() {
    return {
      difficulty: 'easy'
    }
  },
  methods: {
    changeDif() {
      // just for demo purposes
      const difficulties = ['easy', 'medium', 'hard']
      let i = difficulties.indexOf(this.difficulty) + 1
      if (i === difficulties.length)i = 0
      this.difficulty = difficulties[i]
    }
  }
}).mount('#demo')
.box {
  width: 24px;
  height: 24px;
  margin: 4px;
}
.easy {
  background-color: green;
}
.medium {
  background-color: orange;
}
.hard {
  background-color: darkred;
}
<script src="https://unpkg.com/vue@next"></script>

<div id="demo" class="demo">
  <button @click="changeDif()">{{ difficulty }}</button>
  
  <div :class="difficulty" class="box">
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user1599011
Solution 2 Nikola Pavicevic
Solution 3 wittgenstein

Related Questions