So implementieren Sie die bedingte Klassenbindung in VUE

Question

Ist es möglich, mit Vue eine Bedingung zu erstellen, um eine Klasse basierend auf dem bei den Doom-Änderungen geladenen Text hinzuzufügen?

Ich habe eine Liste mit Farbnamen

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

Ich möchte eine Bedingung festlegen. Wenn der Namenstext beispielsweise gelb ist, möchte ich die Klasse „color_gelb“ usw. hinzufügen

Answer 1

尝试像下面的代码片段：

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

  

    

      {{ color }}