Tengo valores que regresan de una API (fácil, medio, difícil): para cada uno de estos valores, me gustaría afectar un color según la dificultad y me gustaría hacerlo en una línea. Básicamente, esto es lo que me gusta hacer en algún tipo de algoritmo HTML (estoy usando 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> ¿Es posible hacer esto en una línea de código con un v-if o un operador ternario? y si es asi como puedo hacerlo?
Tal vez como el siguiente fragmento:
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>Simplemente usaría algún enlace de clase con :class . Puede usar la dificultad como una cadena en sí misma y vincular la clase al objeto dom.
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>Yo usaría 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>