¿Es posible hacer condiciones con Vue para cambiar la clase de agregado de acuerdo con el texto cargado en el doom?
Tengo una lista con nombres de colores.
<span>yellow</span> <span>red</span> <span>grey</span>Quiero hacer una condición, por ejemplo, si el texto del nombre es amarillo, quiero agregar la clase "color_amarillo" y así sucesivamente.
Prueba como el siguiente fragmento:
new Vue({ el: '#demo', data() { return { colors: ['yellow', 'red', 'grey'] } } }) Vue.config.productionTip = false Vue.config.devtools = false .color_yellow { color: yellow; } .color_red { color: red; } .color_grey { color: grey; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <ul> <li v-for="(color, i) in colors" :key="i"> <span :class="`color_${color}`">{{ color }}</span> </li> </div>Puedes probar esto
<span :class="color.colorName">{{ color.colorName }}</span>en CSS,
.yellow { color: yellow } .red { color: red }Para obtener más detalles, puede consultar https://vuejs.org/v2/guide/class-and-style.html