Bagaimana untuk melaksanakan pengikatan kelas bersyarat dalam VUE

Question

Adakah mungkin untuk membuat syarat menggunakan Vue untuk menambah kelas berdasarkan teks yang dimuatkan pada perubahan azab?

Saya ada senarai dengan nama warna

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

Nak tetapkan syarat, contohnya kalau teks nama kuning nak tambah kelas "warna_kuning" dll

Answer 1

Cuba coretan kod seperti di bawah:

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