How to implement conditional class binding in VUE

Question

Is it possible to create a condition using Vue to add a class based on the text loaded on the doom changes?

I have a list with color names

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

I want to set a condition, for example if the name text is yellow I want to add the class "color_yellow" etc.

Answer 1

Try a code snippet like the following:

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