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?
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>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>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>