Comment implémenter la liaison de classe conditionnelle dans VUE

Question

Est-il possible de créer une condition à l'aide de Vue pour ajouter une classe basée sur le texte chargé lors des modifications doom ?

J'ai une liste de noms de couleurs

<span>yellow</span>
<span>red</span>
<span>grey</span>

Je souhaite définir une condition, par exemple si le texte du nom est jaune, je souhaite ajouter la classe "color_yellow", etc.

Answer 1

Essayez un extrait de code comme ci-dessous :

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;
}

sssccc

  

    

      {{ color }}